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

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.

Answer 2

A transition from a page to another is nothing else but navigation.
In order to navigate from a page to another in React Native, you will want a navigation library.
The default Navigator component from React Native might work, but it's got a lot of limitations and issues, and the default solution most people turn to (and which after 3yrs of RN I strongly recommend), is React Navigation. If you are using Expo, it also ships by default, so you can jump right into it, and define your screens like so:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: {
screen: LoginView,
},
Register: {
screen: RegisterView,
},
});
export default createAppContainer(AppNavigator);
If not, here's a quick start guid to using it outside of Expo.