Navigation with React Native

The vast majority of mobile apps that we use are not single page applications--you can click on buttons that take you to different pages, you can go backwards to your previous page, and you can move around like you would with a regular web application. Implementing navigation in a mobile app built using React Native can take your program from a simple one-screened program, to a much more complicated app.

For this post, I will be creating a simple React Native application using Expo. If you have questions about implementing a React Native application, you can find documentation for how to do so here. Also, I will be using my iPhone in order to view and test my React Native app.

First, I'll create an application using Expo:

npm install -g expo-cli
expo init navigator-project  //and then select 'blank' and hit enter
cd navigator-project
npm start

This will open up a page in your browser which will include a QR code. Be sure you have the Expo app downloaded on your phone from the app store. Scan the QR code using your camera, and your barebones app will open in the Expo app. If everything is set up right, you should see something like this on your phone:

To implement navigation, you'll now need to install React Native Navigation:

npm install @react-navigation/native @react-navigation/stack

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

(Note: the above steps are dependent on having set up the application with Expo.)

Once the above steps have finished installing, add the following lines to the very top of your App.js file, above everything else:

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

Inside the return statement in App.js, wrap everything in <NavigationContainer>, and insert a line above the function to initialize the Stack variable. As of now, this is what my App.js file looks like:

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { StyleSheet, Text, View } from "react-native";


const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Now you're officially ready to start using Navigation! (Side note: if you want to reload your application within Expo on your iPhone, you can do so by shaking your phone, and then clicking 'reload' when the menu pops up.)

To actually implement Navigation, we'll first create a couple of components. For this walk-through, I'll create two components: Home and AboutMe. The structure of this app will be that, upon load, the Home component will load, and from there you can click on a button to take you to 'AboutMe'.

I am going to make really simple components for this app. The Home page will greet users to the page, and below the greeting there will be a button to bring users to the About page. Here is the code for my Home component:

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";

const Home = props => {
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 20 }}>This is the Home Page. Welcome!</Text>
      <View style={{ borderColor: "black", borderWidth: 1, margin: 20 }}>
        <Button
          title="About Me"
          color="black"
          onPress={() => props.navigation.navigate("AboutMe")}
        />
      </View>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

I wanted my AboutMe page to say my name, as well as link to my dev.to profile. In React Native, to link to a web's URL you can't use href tags. Instead, you have to use Linking. When you click on the word 'here', that triggers the handlePress function, which opens the dev.to URL.

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { Linking } from "expo";

const AboutMe = props => {
  const handlePress = () => {
    Linking.openURL("http://dev.to/alisabaj");
  };
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 20 }}>My name is Alisa</Text>
      <Text>
        Find my blog posts{" "}<Text onPress={handlePress} style={{ color: "red" }}>here</Text>
      </Text>
    </View>
  );
};

export default AboutMe;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

To put this all together, App.js has to be modified to enable the navigation links. Because I want the first view to be of the Home component, I'll set that equal to intialRouteName. At the top of App.js I imported the Home and AboutMe components, and here is my modified return statement. Notice that each component is put into separate <Stack.Screen> tags. The 'title' inside of options is whatever you want to display at the top of that screen on your navigation:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: "\"Navigator Project\" }}"
        />
        <Stack.Screen
          name="AboutMe"
          component={AboutMe}
          options={{ title: "\"About Me\" }}"
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

After implementing all of these changes, this is what your app would look like. Notice that you can always click 'Back' in the top left hand corner to return to the previous page.

If you've got any questions about React Native Navigation, or what I did in this app, please let me know in the comments!