Set up a React Native NFC iOS and Android App

[00:00 - 00:22] Hello, let's first head into the terminal to start a new Reanative Skeleton project. MPX Reanative init Tech Countergame.

[00:23 - 00:33] Before we go any further, I'd like to explain some basic concepts here. In the Reanative world, there are actually two approaches to start a new project.

[00:34 - 00:43] One is through Expo COI and another is through Reanative COI. Do you ever wonder when to use which?

[00:44 - 00:51] What is the difference between them? To find out, let's see the explanation on Reanative's official site.

[00:52 - 01:16] As you can see, it's set. If you are new to mobile development, the easiest way to get started is with Expo COI.

[01:17 - 01:35] If you are already familiar with mobile development, you might want to use Rean ative. From the official docs, it seems that the differences between them are whether you are new or already familiar with mobile development.

[01:36 - 01:48] But there is another difference, which is much more important. That is, whether your app depends on third-party libraries with native code in it.

[01:49 - 01:54] What does this mean? In Reanative, there are two kinds of libraries.

[01:55 - 02:20] First one is implemented purely in JavaScript. For example, Reanative Element.

[02:21 - 02:37] Reanative Element is a well-known UI library, which provides lots of useful UI components. Since it is a pure UI library, it probably requires no special platform features, so it might be implemented in PureJS.

[02:38 - 02:47] Well, most of the time, but that's not always true. We can see this from the languages area in GitHub page.

[02:48 - 03:06] This project is 96% JavaScript and 3% CSS. On the other hand, let's see the Reanative NFC Manager.

[03:07 - 03:24] Let's check the language section again. It is made by 55% JavaScript, 33% Java, and 21% Objective-C for iOS.

[03:25 - 03:38] If your project needs any of this library which contains native codes, you have two options. The first is to use Reanative-COI to start your project.

[03:39 - 03:50] So your project will contain native platform code and build environment from day one. This is the approach we will take in this course.

[03:51 - 04:02] Second, use Expo-COI and eject later. Though it's possible, but we won't go any further in this approach.

[04:03 - 04:25] If you are interested, you can visit their website to learn more. It looks like the app has been successfully created so we can move on.

[04:26 - 04:32] Next step is to perform native setup for Android. It is quite easy to do.

[04:33 - 04:49] Actually, all we have to do is to edit "endray app src-man" "endray-manifest. xml".

[04:50 - 05:05] The only required modification is to add another uses permission XML element. This basically tells Android we would like to use NFC.

[05:06 - 05:27] And with this declaration, once we publish our app to Google Play Store, these declared permissions will also be listed on your app's page. Let's take NFC tools for example.

[05:28 - 05:43] As you can see, the NFC permission is listed here. Besides use permission, there is an optional element we can consider to edit.

[05:44 - 06:14] That uses feature element. This element allowed us to control our application, show up.

[06:15 - 06:31] What we should consider is whether NFC functionality is crucial for our app. If so, we should add this element.

[06:32 - 06:43] Otherwise, we should omit the "uses" feature element and check for NFC availability at runtime. And I will show you how to do this in later lessons.

[06:44 - 07:03] Finally, let's visit the official Android doc for a quick recap. As you can see, it mentions both uses permission and uses feature.

[07:04 - 07:17] As we just talked about, besides these two, it also mentions uses SDK element. This one is used to define the minimum SDK version required for our app.

[07:18 - 07:32] However, since most Android devices now are in the version much higher than API 10, so it's fine to omit it. Finally, let's move on to iOS setup.

[07:33 - 08:07] iOS setup is slightly more complex comparing to Android, so bear with me. You need to make sure you have enrolled Apple Developer Program and also create an application identity for your app, because we can only test NFC on real devices. For the bundle ID, we use the reverse domain method.

[08:08 - 08:26] For me, I just put my name here. And for you, please remember to change the middle part.

[08:27 - 08:40] We also need to enable the NFC capabilities. It's here.

[08:41 - 09:08] Then register the app. Then open your project in Xcode.

[09:09 - 09:36] First step, we should change the bundle ID into the one we just created. And then make sure we are in the right Apple Developer team.

[09:37 - 09:58] We should add our NFC capability again. After this step, you should see an entitlement file created in your project.

[09:59 - 10:09] This file is generated by Xcode. At this point, this file should look like this.

[10:10 - 10:17] It should contain a near-field communication tech reader session format, which is an array. Content to elements.

[10:18 - 10:25] The first one is NFC data exchange format. And the second one is NFC tech specific data protocol.

[10:26 - 11:05] Finally, edit your info.p list. Now, you are good to go.

[11:06 - 11:29] [ Silence ]