Installation
yarn add react-navigation
or
npm install –save react-navigation
Creating Friends page (screen/Friends.js)
We create the Friends page. We navigate to the HomeScreen by using that string as the id.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default class Friends extends React.Component { render() { return ( <View style={styles.container}> <Text>Friends.js - Add Friends here!</Text> <Button title="Back to home" onPress={() => this.props.navigation.navigate('HomeScreen') } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
Creating Home page (screen/Home.js)
Create a home page. Make sure any kind of text is wrapped in Text. We have a button, that upon the onPress event, navigates to our ‘FriendScreen’. This string is dictated by our AppContainer file below and used to navigate to the Friends page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default class Home extends React.Component { render() { return ( <View style={styles.container}> <Text>Home.js - We have no friends!</Text> <Button title="Add some friends" onPress={() => this.props.navigation.navigate('FriendsScreen') } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
AppContainer
In the latest react navigation, we create an app container that houses a navigator.
We will be implementing this AppContainer in AppContainer.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { createStackNavigator, createAppContainer } from 'react-navigation'; import Home from './screens/Home'; import Friends from './screens/Friends'; // create navigator const AppNavigator = createStackNavigator({ FriendsScreen: { screen: Friends }, HomeScreen: { screen: Home } }); // create container, which houses the navigator const AppContainer = createAppContainer(AppNavigator); // Now AppContainer is the main component for React to render export default AppContainer; |
For the AppNavigator object, notice the properties FriendsScreen and HomeScreen. They will be used as strings ids when other screens need to navigate…like so:
|
1 |
this.props.navigation.navigate('FriendsScreen') |
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React, { Component } from "react"; import { StyleSheet, Text, View, AppRegistry, Image } from "react-native"; import AppNavigator from './AppContainer'; import AppContainer from "./AppContainer"; console.log("start of App.s"); export default class App extends React.Component { constructor(props) { super(props) this.state = { possibleFriends: [ 'Allie', 'Gator', 'Lizzie', ], currentFriends: [], } } addFriend = (index) => { const { currentFriends, possibleFriends, } = this.state // Pull friend out of possibleFriends const addedFriend = possibleFriends.splice(index, 1) // And put friend in currentFriends currentFriends.push(addedFriend) // Finally, update our app state this.setState({ currentFriends, possibleFriends, }) } render() { return ( <AppContainer /> ); } } |
Passing into AppContainer
As you can see we pass in a prop called screenProp
It is an object, which we put inside of JS expression brackets.
In this object, we pass three properties.
1) current Friends array
2) possible Friends array
3) add Friends function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
export default class App extends React.Component { constructor(props) { super(props) this.state = { possibleFriends: [ 'Allie', 'Gator', 'Lizzie', ], currentFriends: [], } // state } // addFriend function addFriend = (index) => { ... } render() { // Then we can access them in our screens. // For instance, let’s make our // Home screen actually tell us how many // currentFriends we have: return ( <AppContainer screenProps={ { currentFriends: this.state.currentFriends, possibleFriends: this.state.possibleFriends, addFriend: this.addFriend, } } /> ); } |
Retrieving the props data
In home, we retrieve it via this.props.
this.props.screenProps.currentFriends.length
|
1 2 3 4 5 6 7 8 9 10 |
export default class Home extends React.Component { render() { return ( <View style={styles.container}> <Text>Home.js - We have { this.props.screenProps.currentFriends.length } friends!</Text> ... </View> ); } } |
In Friends, we use more of its features
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
export default class Friends extends React.Component { render() { return ( <View style={styles.container}> <Text>Friends.js - Add Friends here!</Text> { this.props.screenProps.possibleFriends.map((friend, index) => ( <Button key={ friend } title={ `Add ${ friend }` } onPress={() => { this.props.screenProps.addFriend(index); console.log(this.props.screenProps.currentFriends); } } /> ) ) } <Button title="Back to home" onPress={() => this.props.navigation.navigate('HomeScreen') } /> </View> ); } } |