NFC App Setup

Create project skeleton#

Pre-step: finish the environment setup for react-native-cli.

Let's first head to the terminal to start a new React Native skeleton project:

Before we go any further, I'd like to explain some basic concepts here.

In the React Native world, there are actually two approaches to start a new project: one is through expo-cli, and another is through react-native-cli.

When should you use one or the other? What are the differences between them? To find out, let's see the explanation on React Native's official site.

react-native-doc

It says:

  • If you are new to mobile development, the easiest way to get started is with Expo CLI

  • If you are already familiar with mobile development, you may want to use React Native CLI

From the official docs, it seems that the differences between them are whether you're new or already familiar with mobile development, but there is another difference much more important: whether your app depends on a third party library with native code in it.

What does this mean?

In React Native, there are two kinds of libraries. The first one is implemented purely in JavaScript. For example: react-native-elements.

react-native-elements 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 pure JavaScript.

Well, most of the time, but that's not always true. Most React Native UI libraries use built-in components to compose their own components, but there are some that still contain custom native code, especially for wrapping native UI components.

We can see this from the Languages area of the GitHub page:

react-native-element

This project is 96.9% JavaScript and 3.1% CSS.

On the other hand, let's see the react-native-nfc-manager in GitHub

Let's check the Language section again:

react-native-nfc-manager

It is made by 45.2% JavaScript, 33.6% Java for Android, and 21.0% Objective-C for iOS.

If your project needs any of these libraries which contain native code, you have two options: 1. Use react-native-cli to start your project, so your project will contain the native platform code and build environment from day one. This is the approach we will take in this course. 2. Use expo-cli, and eject later. Though it's possible, we won't go any further in this approach. If you're interested, you can visit this documentation to learn more.

Project setup for Android#

Our next step is to perform native-setup for Android.

It is quite easy to do, actually. All we have to do is to edit android/app/src/main/AndroidManifest.xml

(go to official doc)

The only required modification is to add another uses-permission XML element:

This basically tells Android we'd like to use NFC. These declared permissions will also be listed on our app's page once we publish our app to the Google Play Store.

Let's take NFC Tools for example:

Visit Google Play for NFC Tools.

google-play-permission

Besides uses-permission, there's an optional element we can consider adding: the uses-feature element.

This element allows us to make our application available in Google Play only for devices that have NFC hardware.

We should consider whether NFC functionality is so crucial to our app that we should prevent non-NFC compatible devices from downloading it. If so, we should add this element. Otherwise, we should omit the uses-feature element and check for NFC availability at runtime. I will show you how to do this in later lessons.

Finally, let's visit the official Android documentation for a quick recap.

As you can see, it mentions both uses-permission and uses-feature, as we just talked about. Besides these two, it also mentions uses-sdk element. This element is used to define the minimum SDK version required for our app. However, since most Android devices use versions much higher than API 10, it's fine to omit it.

Project setup for iOS#

Let's move on to iOS setup.

iOS setup is slightly more complex compared to Android, so bear with me.

Check out Apple's official documentation.

Pre-step: make sure you have enrolled in the Apple Developer Program and created an application identity for your app because we can only test NFC on real devices.

First, you need to enable NFC Tag Reading capability on the Apple Developer site for your app

enable-capability

Then open your project in XCode:

You should see a xxx.entitlement file inside your project. Edit it to look like this:

edit-entitlement

Finally, edit your Info.plist to add the NFCReaderUsageDescription

edit-info-plist

Now you're good to go!

Start a new discussion. All notification go to the author.