Example of Navigation between views in React Native Android?

Question

After check the React Native documentation, I still don't understand the best way to create views and navigate between different components.

I don't want to use any external components like:

https://github.com/Kureev/react-native-navbar/

https://github.com/23c/react-native-transparent-bar

https://github.com/superdami/react-native-custom-navigation

I don't need a Navigation bar, i just want to set views and slide left, right o pop a view, nothing more.

I know is something basic, but I can't find any helpful example.

Please, anyone can help me? Any functional example in https://rnplay.org/?

Thank you.

Answer 1

UPDATE 04/2018 :

Things have change since my first answer, and today two massive libraries are relevant for navigation : react-navigation and react-native-navigation.

I will wrote an example for react-navigation which is an easy to use library and full JS maintain by serious people from the community.

First install the library :

yarn add react-navigation 

or

npm install --save react-navigation 

Then in your app entry point (index.js) :

import Config from './config';  import { AppRegistry } from 'react-native'; import { StackNavigator } from 'react-navigation';  export const AppNavigator = StackNavigator(Config.navigation); AppRegistry.registerComponent('appName', () => AppNavigator); 

You can see that we pass an object to the StackNavigator, it's all ours screens configuration, here is an example of configuration :

import HomeScreen from "./HomeScreen"; import SettingsScreen from "./SettingsScreen";  const Config = {       navigation: {           Home: {             screen: HomeScreen           },           Settings: {             screen: SettingsScreen,           }        }     } 

Now the app know each screen we got. We can simply tell the "navigate" function to go to our Setting Screen. Let's watch our Home Screen :

class HomeScene extends Component {        constructor(props) {           super(props);       }        render () {         return (         <View>             <Button               title="Go to Settings"               onPress={() => this.props.navigation.navigate('Settings')}             />         </View>          );       }     } 

As you can see, the navigation will hydrate the props. And from here you can make what you want.

Go to the library documentation to see all you can do : change the header type, the title, navigation type, ...

PREVIOUS ANSWER :

Watch this example: https://github.com/h87kg/NavigatorDemo

It's useful and a well written Navigator example, better than the one above you just wrote, I think.

Mainly watch the relationship between LoginPage.js and MainPage.js