How can I achieve the "View slide-in" effect in react native?

Question

I am currently working on my very first react-native application and am wondering how that slide in effect of a new view can be achieved and where that "hidden" view should be placed.

My Application is currently build like this:

<View style={{flex:1}}>
 <View style={{flex:.8, justifyContent:'center'}}>
   .. some login Form
 </View>
 <View style={{flex:.2, justifyContent:'center', alignItems:'center'}}>
  <TouchableHighlight onPress={this._toggleRegistryView}>
     <Text> or register here </Text>
   </TouchableHighlight>
  </View>
</View>

As you can see in this basic code I want to slide-in the Registration View as soon as the touchable component is pressed.

Do I need to store the view "invisible" with a width of 0 and height of 100% on one side and then animate it to the full device width?

Right now I have no idea besides a whole new view render when the state changes

render(){
   return({this.state.view == 'login' ? <LoginView /> : <RegistryView />});
}

Unfortunately this triggers a "hard" view change and not a smooth right to left or left to right animation where the view slides in.

If my question was unclear please inform me - I'll gladly try to specify it :) Thank you for your help

Answer 1

You should split your application into multiple scenes (screens) and use the Navigator component to transition between the scenes.

Here is a tutorial from the TaskRabbit blog to get you started.

Once you have you scenes set up, you can experiment with different SceneConfigs for different types of transition animations.