In this lesson, we will set up our tap-and-go project skeleton, including:

• Install and set up the navigation library: react-navigation.

• Install and set up the UI component library: react-native-vector-icons and react-native-paper.

• Write our HomeScreen UI and make our first screen navigation.

If you're already familiar with the above libraries, feel free to skip this lesson.

However, if your react-native experience is mostly around expo, I suggest you watch the video and follow along.

Set up react-navigation#

First, you will need to create a new react-native project using react-native-cli and do all the NFC-specific configuration as well as library installation, just like we mentioned in the previous TagCounterGame app.

After all this, you should see the react-native-nfc-manager library is installed, and your skeleton project should run properly as well.

Next, install our library for navigation. The library we will use is react-navigation.

The installation and configuration process is well-documented in reactnavigation.org/docs/getting-started. You should be able to follow along smoothly. And since we're using react-native-cli, we should follow the corresponding sections in the document.

As you can see, react-navigation is a complex library, so it also depends on lots of other libraries. Here I list all the dependencies. Let's install all of them right now.

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

Since most of the dependencies listed here contain native code, we need to perform a pod install.

Now we'd like to use react-navigation in our project. Create a src/App.js file. Then, go back to reactnavigation.org website, go to the next page, and copy the hello-world example.

(src/App.js)

import * as React from 'react';

import { View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>Home Screen</Text>

    </View>

  );

}

const Stack = createStackNavigator();

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen name="Home" component={HomeScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

export default App;

Come back to our app and paste all the code into it. Then, go to index.js and point the App component from App.js to src/App.js.

Oops, there's an error. What happened? Maybe it's because we just installed those new libraries, and our react-native packager failed to hot-reload all of them.

Let's restart the packager and try it again.

It still fails, but the error is changed. It says:

requireNativeComponent: "RNSScreen" was not found in UIManager

This issue is because we haven't reloaded our native code yet. Even though the JavaScript part has been updated, it still needs the corresponding native code to work properly.

Let's rerun the app using XCode. Remember, after you install any libraries with native code or assets, you need to restart the packager and rerun the app with your platform IDE to make sure the native code is reloaded.

Now it works!

Set up icons and UI component libraries#