Create new React-Native app: System dependencies and initialize a new app
Part ɪ: Creating new React-Native app│Story 01: Install System Dependencies and initialize a new React-Native app
System dependencies for React-Native
If this is for the first time you are building a react-native app, you need to prepare your local development system/computer with the dependencies for react-native.
There are two ways to start and develop a react-native app:
1. Using Expo CRNA tool
2. Using React-Native CLI
1. Using Expo CRNA tool
Expo CRNA is the easiest way yo get started, is more developer friendly and also provides lot of in-built mobile features in Expo SDK like MapView or BarcodeScanner.
Expo CRNA’s system dependency is just Node; to test/try out your app in development mode, you need a phone with Expo app installed or a local device (iOS/Android) emulator. Alternatively you can try out the RN app directly in web using Expo’s Snack tool.
2. Using React-Native CLI
Sometimes your RN app may need a third-party package for which RN doesn’t have a in-build bridge to the native system. Such packages may provide a way to build a bridge between RN and native system using a react-native link command or adding some files/configurations to your RN app’s XCode and Android versions.
It may be hard to link any such third-party package to the native system in the app built with Expo CRNA because Expo hides away a lot of native code from the developer to keep things easy. So if your app has any such need to link a third-party package to the native system you should build a pure RN app using React-Native CLI.
If you started with Expo CRNA and later at some point have a need to link some packages that are not going to get linked with Expo workflow, there are ways to change a RN app started with Expo CRNA to a pure RN app.
Installing System Dependencies for ReactNative CLI
We would initialize/scaffold our app using React-Native CLI.
Follow this guide to install the dependencies for React-Native CLI for mac / windows or linux platforms. 👇
To target the app for both iOS and Android platforms, install the dependencies for the two platforms.
After installing the Android dependencies, make sure to add the following lines to your $HOME/.bash_profile or $HOME/.bashrc config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-toolsAfter adding the above lines, save the file and type source $HOME/.bash_profile from terminal to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running echo $PATH.
Initializing project using 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚌𝚕𝚒
To initialize a new React-native project using 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚌𝚕𝚒, open terminal and cd to the folder where you would like to create your app’s project folder, and run the command npx react-native init <<yourAppName>>.
[Avoid using hyphens(not accepted in Package name by Android) and underscores(not accepted in Bundle Id by Apple), in the project name.]
$ npx react-native init rnTSgitlabCICDExample$ cd rnTSgitlabCICDExample
After initialized, cd to the app folder and test app by running on iPhone/Android/emulators using npx react-native run-ios or npx react-native run-android command.
There, that was easy, we got our react-native app initialized and running on a connected phone or emulator.
Next, we will tweak the initial scaffolded app by RN CLI to rename the app’s iOS Bundle ID/Android package name as per our requirements.
←Prev: Introduction ┈ 🏠 ┈ Next: Rename BundleId/PackageName→
