In this article, we will learn how to navigate the mobile application screen using react-navigation in React Native.
Why React Navigation?
React Navigation is a popular library for routing and navigation in the React Native application.
React Navigation is a JavaScript-based library for screen navigation. It was officially introduced by both Facebook and the React Native Document as the optimal solution for screen navigation.
Getting Set Up
We are going to create an application called MyAlligatorFace.
First, create a new React Native application:
1 2 3 4 5 | $ create-react-native-app MyAlligatorFace $ cd MyAlligatorFace $ npm start |
The idea is that when you open the application, the names of our friends will be displayed on the screen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> We have no friends <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Home Screen
Our application will need two screens: HomeScreen and FriendScreen. In HomeScreen, we will see our friends and in the FriendScreen screen we will be able to add new friends.
To get started, grab the code from App.js and add it to a new file called Home.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> We have no friends <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
To navigate to HomeScreen, we will create a StackNavigator.
StackNavigator with React Navigation
StackNavigator works exactly like a stack. Each screen we navigate to is pushed to the top of the stack and each time the back button is pressed, this screen is pushed off the top of the stack.
First, install react-navigation:
1 2 | $ npm install --save react-navigation |
Next, create a file named AppNavigator.js:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-navigation'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./Home'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> AppNavigator <span class="token operator">=</span> <span class="token function">createStackNavigator</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> Home <span class="token punctuation">:</span> <span class="token punctuation">{</span> screen <span class="token punctuation">:</span> Home <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> AppNavigator <span class="token punctuation">;</span> |
This creates a small stack in Navigator, only one screen: HomeScreen.
The display content of the application starts from App.js. If we include our StackNavigator in App.js, our application will be much more modular and clean.
Edit App.js file as follows:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> AppNavigator <span class="token keyword">from</span> <span class="token string">'./AppNavigator'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> AppNavigator <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
After saving changes and running the application, everything is still running and nothing has changed. But the truth is we still do not have friends. Let’s do FriendScreen to change that!
Friends Page
First create a file similar to Home.js called Friends.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Friends</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> Add friends here <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Next, add it to the Navigator:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-navigation'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./Home'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Friends <span class="token keyword">from</span> <span class="token string">'./Friends'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> AppNavigator <span class="token operator">=</span> <span class="token function">createStackNavigator</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> Home <span class="token punctuation">:</span> <span class="token punctuation">{</span> screen <span class="token punctuation">:</span> Home <span class="token punctuation">}</span> <span class="token punctuation">,</span> Friends <span class="token punctuation">:</span> <span class="token punctuation">{</span> screen <span class="token punctuation">:</span> Friends <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> AppNavigator <span class="token punctuation">;</span> |
Finally, add navigation buttons between the two screens.
In Home.js, correct the code like the following:
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> We have no friends <span class="token operator">!</span> <span class="token operator"><</span> Button title <span class="token operator">=</span> <span class="token string">"Add some friends"</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> navigation <span class="token punctuation">.</span> <span class="token function">navigate</span> <span class="token punctuation">(</span> <span class="token string">'Friends'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
In Friends.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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Friends</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> Add friends here <span class="token operator">!</span> <span class="token operator"><</span> Button title <span class="token operator">=</span> <span class="token string">"Back to home"</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> navigation <span class="token punctuation">.</span> <span class="token function">navigate</span> <span class="token punctuation">(</span> <span class="token string">'Home'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Let’s talk about this.props.navigation :
With react-navigation: as long as our screen is included in StackNavigator, it automatically inherits many props from the navigation object. We only use one of them: navigate , to navigate to another page, but we can do more than that. For example, we can view the navigation history and retrieve parameters from other pages.
Run the application and we can back and forth between the two screens:
Adding Friends
In App.js, add a possibleFriends array and an existingFriends array to the state:
And add a function to move a friend in possibleFriends to currentFriends:
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> AppNavigator <span class="token keyword">from</span> <span class="token string">'./AppNavigator'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> possibleFriends <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'Allie'</span> <span class="token punctuation">,</span> <span class="token string">'Gator'</span> <span class="token punctuation">,</span> <span class="token string">'Lizzie'</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> currentFriends <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function-variable function">addFriend</span> <span class="token operator">=</span> <span class="token punctuation">(</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> currentFriends <span class="token punctuation">,</span> possibleFriends <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token comment">// Pull friend out of possibleFriends</span> <span class="token keyword">const</span> addedFriend <span class="token operator">=</span> possibleFriends <span class="token punctuation">.</span> <span class="token function">splice</span> <span class="token punctuation">(</span> index <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token comment">// And put friend in currentFriends</span> currentFriends <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> addedFriend <span class="token punctuation">)</span> <span class="token comment">// Finally, update our app state</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> currentFriends <span class="token punctuation">,</span> possibleFriends <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> AppNavigator <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Passing Logic to Other Screens
It is now possible to add friends in App.js, but we need to add in Friends.js and let them show in Home.js using props.
Add the App.js file as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> AppNavigator screenProps <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> currentFriends <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> currentFriends <span class="token punctuation">,</span> possibleFriends <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> possibleFriends <span class="token punctuation">,</span> addFriend <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> addFriend <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
We can then access them in the screens in the Navigator. For example, displaying the current friends list in HomeScreen, Edit Home.js file as follows:
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> We have <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> screenProps <span class="token punctuation">.</span> currentFriends <span class="token punctuation">.</span> length <span class="token punctuation">}</span> friends <span class="token operator">!</span> <span class="token operator"><</span> Button title <span class="token operator">=</span> <span class="token string">"Add some friends"</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> navigation <span class="token punctuation">.</span> <span class="token function">navigate</span> <span class="token punctuation">(</span> <span class="token string">'Friends'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Now we need to add our friends to Friends.js to complete the application
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 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheet <span class="token punctuation">,</span> Text <span class="token punctuation">,</span> View <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Friends</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> Add friends here <span class="token operator">!</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> screenProps <span class="token punctuation">.</span> possibleFriends <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> friend <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span> Button key <span class="token operator">=</span> <span class="token punctuation">{</span> friend <span class="token punctuation">}</span> title <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token template-string"><span class="token string">`Add </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> friend <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">}</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> screenProps <span class="token punctuation">.</span> <span class="token function">addFriend</span> <span class="token punctuation">(</span> index <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> Button title <span class="token operator">=</span> <span class="token string">"Back to home"</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> navigation <span class="token punctuation">.</span> <span class="token function">navigate</span> <span class="token punctuation">(</span> <span class="token string">'Home'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#fff'</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Please run the application again, we can see our friends to add:
Accomplished
References
The article was translated from Routing with React Navigation in React Native