How to animate conditional rendering in React Native? - Stack Overflow

How can I do smooth fade animation while switching between navigation stacks for logged in & logged out state.

I am using React-Navigation library for creating the stack.

Below is the code that I want to animate.

<NavigationContainer>
    <Stack.Navigator>
        {isLoggedIn ? (
            <Stack.Screen
                name='HomeStack'
                component={HomeStack}
                options={{
                    headerShown: false,
                    cardStyleInterpolator: ({ current }) => ({
                        cardStyle: {
                            opacity: current.progress,
                        },
                    }),
                }} />
        ) : (
            <Stack.Screen
                name='Auth'
                component={AuthStack}
                options={{
                    headerShown: false,
                    cardStyleInterpolator: ({ current }) => ({
                        cardStyle: {
                            opacity: current.progress,
                        },
                    }),
                }} />
        )
        }
    </Stack.Navigator>
</NavigationContainer>

Coming from iOS background, I used to animate switching between the view controller like so

static func switchRootViewController(rootViewController: UIViewController, animated: Bool, completion: (() -> Void)?) {
    let window = appDelegate.window!
    if animated {
      UIView.transition(with: window, duration: 0.5, options: .transitionCrossDissolve, animations: {
        let oldState: Bool = UIView.areAnimationsEnabled
        UIView.setAnimationsEnabled(false)
        window.rootViewController = rootViewController
        window.makeKeyAndVisible()
        UIView.setAnimationsEnabled(oldState)
      }, completion: { (finished: Bool) -> () in
        if (completion != nil) {
          completion!()
        }
      })
    } else {
      window.rootViewController = rootViewController
      window.makeKeyAndVisible()
    }
  }

Same thing I want to do in React Native

How can I do smooth fade animation while switching between navigation stacks for logged in & logged out state.

I am using React-Navigation library for creating the stack.

Below is the code that I want to animate.

<NavigationContainer>
    <Stack.Navigator>
        {isLoggedIn ? (
            <Stack.Screen
                name='HomeStack'
                component={HomeStack}
                options={{
                    headerShown: false,
                    cardStyleInterpolator: ({ current }) => ({
                        cardStyle: {
                            opacity: current.progress,
                        },
                    }),
                }} />
        ) : (
            <Stack.Screen
                name='Auth'
                component={AuthStack}
                options={{
                    headerShown: false,
                    cardStyleInterpolator: ({ current }) => ({
                        cardStyle: {
                            opacity: current.progress,
                        },
                    }),
                }} />
        )
        }
    </Stack.Navigator>
</NavigationContainer>

Coming from iOS background, I used to animate switching between the view controller like so

static func switchRootViewController(rootViewController: UIViewController, animated: Bool, completion: (() -> Void)?) {
    let window = appDelegate.window!
    if animated {
      UIView.transition(with: window, duration: 0.5, options: .transitionCrossDissolve, animations: {
        let oldState: Bool = UIView.areAnimationsEnabled
        UIView.setAnimationsEnabled(false)
        window.rootViewController = rootViewController
        window.makeKeyAndVisible()
        UIView.setAnimationsEnabled(oldState)
      }, completion: { (finished: Bool) -> () in
        if (completion != nil) {
          completion!()
        }
      })
    } else {
      window.rootViewController = rootViewController
      window.makeKeyAndVisible()
    }
  }

Same thing I want to do in React Native

• react-native
• react-navigation
• react-animations

Share Improve this question Follow asked Jan 8 at 12:58 Anirudha MahaleAnirudha Mahale 2,60644 gold badges3939 silver badges6262 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Conditionally rendering Stack screen won't help you achieve transitions when navigating between screens.

Instead use the router instance to push/replace between screens, this will leverage the OS navigation transitions.