Tap-And-Go Project Setup
In this lesson, we will set up our tap-and-go project skeleton, including:
Install and set up the navigation library:
Install and set up the UI component library:
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
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
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.
Since most of the dependencies listed here contain native code, we need to perform a
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
Come back to our app and paste all the code into it. Then, go to
index.js and point the
App component from
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:
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!