Initialize React-Native App

Part ɪɪ: React-Native UI│Story 03: Initializing React-Native App and updating Bundle Id/App Id/Package Name.

GIT : Repo

In the previous posts of this Part-II of the series, we looked at the resources to get the system dependencies for react-native and then got our app registered for Google Sing-in for iOS platform. Now that we have the needed ground-work done, let’s get started with creating our React-Native app.

There are two ways to initiate a react-native project either using Expo or using the react-native cli.

Using Expo is the easiest and fastest way to build a simple , quick react-native app.
Building with native cli is a better approach for long term if you want to add third-party plugins to link their native dependencies to the react-native app’s iOS/Android projects.

Open the terminal and cd to your working folder where you would like to create our app’s react-native project folder.

Run the below command on the terminal.

react-native init noteWordy

The above command would create a folder named noteWordy and scaffold a basic react-native application in the folder.

$ cd noteWordy

[ 📢 : 👉 From now onwards, unless otherwise stated, all the terminal commands specified in this article can be assumed to be run from this folder as pwd on your terminal. We we would refer this folder as root folder of our react-native project. 👈 ]

Renaming App’s Bundle Id and Package Name

When react-native CLI scaffolds the app, it generates a Bundle Id (for iOS) as org.react.native.example.noteWordy and Android Package name in the format com.<AppName provided in init command> . i.e. com.noteWordy

However, as per our resource name specifications, we want our app’s bundle/package name to be com.jsifiedbrains.notewordy

Unfortunately the init command of react-native cli doesn’t provide an option to name the package any longer 😠.

So, we have to update Package name and Bundle Id manually. (here is an excellent guide)

iOS App

Renaming Bundle Id for iOS

Open the iOS project in XCode by running below command:

$ open ios/noteWordy.xcodeproj

Open the project’s General settings and change the Bundle Identifier under Identities section:

Running app on iOS simulator

Let’s build and run the basic application, that react-native init command scaffolded for us, on iOS simulator. Run the below command on terminal:

$ react-native run-ios

The above command should start building the app for iOS platform. It would open the iOS simulator. The command would also open metro bundler in a new terminal window. Finally once the app build is complete and bundled, it would open on simulator: 👇

(note that first time the app building may take few minutes, so be patient and if for some reason app fails to load or errors out, try closing simulator and metro bundler and rerun the command. For one of may colleague a restart of the system got him get rid of the red-screen error.)

Android app

Renaming Package Name for Android project

Open the noteWordy/android project in Android Studio.

$ open -a /Applications/Android\ Studio.app ./android

This would open the android project of our app in Android studio. Once the project is opened, Android Studio would start a build and gradle sync for the app. Let it finish to sync successfully.

To rename package name, we have to change 4 files 👇

1⃣ android/app/src/main/java/com/noteWordy/MainActivity.java
2⃣ android/app/src/main/java/com/noteWordy/MainApplication.java

3⃣ android/app/src/main/AndroidManifest.xml

4⃣ android/app/build.gradle

Because we renamed our package from com.notewordy to com.jsifiedbrains.notewordy, its better we also update the folder structure under which MainApplication.java file resides to reflect the package name.

Currently MainApplication.java file is under:

<<project root>>/android/app/src/main/java/com/notewordy

Create a new folder named jsifiedbrains under <<project root>>/android/app/src/main/java/com/ and move the notewordy to this new jsifiedbrains folder.

Once the package name has been changed in all the 4 files, and folder structure updated as above, build the project again to make sure is not breaking after these changes:

Running app on Android simulator

Make sure you have an AVD device running or an android device connected to your machine. You can open AVD manager from Android studio to start a AVD:

Once an android simulator is up and running, run the below command on terminal:

$ react-native run-android

The above command should start building the app for android platform. Once the android build is complete and bundled, it would open on simulator: 👇

Perfect 👏, so we got the first step of initializing our react-native app working. In the next post, we would quickly set up ESLint and Prettier for our react-native project.

(In case you get any error when running the app either on iOS or Android 😓, make sure you have all the dependencies installed and configured as described in the react-native docs for iOS and Android.)

← Prev: Register with Google┈🏠┈ Next: ESLint and Prettier→