Tap-And-Go Project Setup With React Native and NFC Manager

[00:00 - 00:28] Hello, in this lesson we will set up our tab 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 home screen UI and make our first screen navigation.

[00:29 - 00:45] If you are already familiar with the above libraries, feel free to skip this lesson. However, if your native experience is mostly a wrong expo, I suggest you watch this video and follow along.

[00:46 - 01:05] First, you will need to create a new Re-native project, using Re-native COI and do all the NFC specific configuration as well as library installation. Just like we mentioned in the previous Tech Counter-GAN app.

[01:06 - 01:24] After all this, you should see the Re-native NFC Manager library is installed and your skeleton project should run properly as well. Next, install our library for navigation.

[01:25 - 01:38] The library we will use is react navigation. The installation and configuration process is well documented in re-navigation.

[01:39 - 01:45] org. Duck getting started. You should be able to follow along smoothly.

[01:46 - 02:00] And since we are using Re-native COI, we should follow the corresponding sections in the document. As you can see, react navigation is a complex library.

[02:01 - 02:09] So, it also depends on lots of other libraries. Here I list all the dependencies.

[02:10 - 02:26] Let's install all of them right now. Since most of the dependencies list here contain native code, we need to perform a part install.

[02:27 - 02:36] Now we would like to use Re-navigation in our project. Create a srcapp.js file.

[02:37 - 02:51] Then go back to re-navigation.org website. Go to the next page and copy the Hello World example.

[02:52 - 03:06] 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 srcapp.js.

[03:07 - 03:13] Oops, there is an error. What happened?

[03:14 - 03:38] Maybe it's because we just installed those new libraries and our Re-native package fails to hot reload all of them. Let's restart the package and try it again.

[03:39 - 03:51] It still fails, but the error is changed. It says "require native component, our end screen, are not found in ui-manager ".

[03:52 - 04:08] This issue is because we haven't reload our native code yet. Even though the JavaScript part has been updated, it still needs the corresponding native code to work properly.

[04:09 - 04:30] Let's rerun the app using Xcode. Remember, after you install any libraries with native code or assets, you need to restart the package and rerun the app with your platform IDE to make sure the native code is reloaded.

[04:31 - 04:43] Now it works. Next, we'd like to install Re-native paper as our primary UI library.

[04:44 - 04:54] And this library depends on another library. Re-native vector icons, which provides lots of awesome icons.

[04:55 - 05:05] The Re-native vector icons library also contains native code and assets. So we need to perform part install as well.

[05:06 - 05:21] There are two extra steps for Re-native vector icons. For iOS, we will need to add info.plist and add a key called "fans provided by application".

[05:22 - 05:34] This value is an array. Add an element with the value "materialcommunityicons.ttf" into this array.

[05:35 - 05:47] This font file is required by Re-native paper. The final result should look like this.

[05:48 - 06:04] For Andre, we will need to add one line into our "endry app build.gradle" file. The idea here is to include library specific build files in our project.

[06:05 - 06:26] The final result should look like this. Of course, we should restart Re-native package and rerun our app using "scode" as well.

[06:27 - 06:36] Now we can use Re-native paper in our project. Let's go to Re-native papers getting started page.

[06:37 - 06:45] It seems that the only required step is to wrap our whole app in provider from Re-native paper. Let's do it now.

[06:46 - 07:40] Let's do a quick refactor. We would like to extract the navigation related code into a single file called "appnavigator".

[07:41 - 07:52] Then go back to our app.js. Import and use the "appnavigator" component just created.

[07:53 - 08:09] Next, we would like to extract the home screen out of our app navigator. First, create a "src screens" directory.

[08:10 - 08:20] So we can put all screen components here. Then create a "homescreen.js" file inside this directory.

[08:21 - 08:44] Copy the original "homescreen" code from "appnavigator" into "homescreen.js". Go back to "appnavigator" and get rid of the old content.

[08:45 - 09:05] Okay, now we have separated our screen component from our navigator component. Let's quickly build our user interface for a home screen.

[09:06 - 09:35] This screen should have two primary buttons, one called "tap", which let users read and death from NFC tags and another called "link", which let the users write and death into NFC tags. As you can see, the button component comes from Re-native paper and it looks pretty good.

[09:36 - 09:41] Let's look at the styling. It also pretty straightforward.

[09:42 - 09:58] Now, it's time for our first navigation. The term "navigation" means to jump from one screen to another screen.

[09:59 - 10:07] Let's first create a new screen called "tap detail screen". Copy all the content from "homescreen".

[10:08 - 10:31] Get rid of most of it, leaving only "tap detail". The next step is to register our "tap detail screen" into our "appnavigator".

[10:32 - 10:45] This process is quite simple. First, import the component and add a stack.screen.

[10:46 - 10:58] Give it a name and point the component prop to "tap detail screen". Now our new screen is registered.

[10:59 - 11:11] So we should be able to navigate from "homescreen" to "tap detail screen". Go to "homescreen" and destructor the "navigation prop".

[11:12 - 11:24] Then add an "unpress handler" to our "tap" button. Inside it, simply call "navigation.navigate" and pass the screen name into it.

[11:25 - 11:41] As you can see, we can now jump forward and backward between the "home" and " tap detail" screens, thanks to "reinavigation". Thank you.