CODEWITHSUNDEEP
react-nativereact-navigation
ChrisPalmer
ChrisPalmer

Reputation: 295

React Navigation: Animating the page transition of the first card in the stack

So I'm building a react-native app and using React-Navigation as my router. A few of my components require some fancy page transitions , so I've implemented a custom transitioner using the Component from React-Navigation. I can get the page transition animation to work in my navigator as long as I have more than 1 route in the stack. I've noticed this pattern also exists for their default navigators, such as StackNavigator, TabNavigator, etc. The first route in a navigator never seems to have a page transition. For Example:

const ExampleNavigator = StackNavigator({
  home: { screen: HomeScreen },
  test: { screen: TestScreen },
  introduction: { screen: IntroductionScreen },
})

Both TestScreen and IntroductionScreen will have the standard slide transition defined by the stack navigator, but the home screen will not. My question is, How can I also apply a page transition on the first screen as well?

Upvotes: 0

Views: 1166

Answers (1)

jkhedani
jkhedani

Reputation: 468

When your app initially loads it does transition in from the splash page however your app will just load the last known screen when loading from background. While not a typical user experience, you could just place a blank 'pre-screen' in front of whatever route you want to transition in to give you the effect you want. Here's the component:

class PreScreen extends Component {
  constructor(props) {
    super(props);
    // Immediately push the Home screen on to the stack
    const { navigation } = this.props;
    navigation.navigate('Home'); 
  }
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }} />
    )
  }
}

Then in your StackNavigator do something like this if you want your Home Screen to transition in.

const RootNavigator = StackNavigator({
  PreScreen: {
    screen: PreScreen,
  },
  Home: {
    screen: HomeScreen,
    navigationOptions: ({navigation}) => ({
      // Note: The PreScreen will still be a valid route so I'm just hiding the back button here.
      headerLeft: null
    })
  }
});

Upvotes: 1

Related Questions