This repository hosts a up-to-date React Native project with common libraries and behaviors, such as:
- React Navigation to handle routing
- RNFirebase (Invertase) (includes Firebase Analytics and Messaging) to handle analytics and push notifications
- react-native-config to handle multiple environments
- React Native FontAwesome to create beautiful UI
- Axios to handle HTTP requests
- MomentJS to properly handle datime-related issues
- Fastlane to handle automated builds and CI/CD
Clone the repository for each new project.
Ensure you have the following installed (with latest stable versions available):
- NodeJS / npm
- Xcode and related software development tools
- Android SDK and any Android emulator (or any alternative such as Genymotion)
Install dependencies via yarn install (or npm install).
You can run the empty project on iOS and Android with the following commands:
$> npm run ios-dev
$> npm run android-dev
This is a pain in the ass to rename project files, structure and directories, so I advise not to rename every build files but instead only update package/bundle identifier and app display name.
Default is com.rnscaffold. You can change it by following the steps described in this StackOverflow answer.
To know: for dev and staging environments, a suffix (.dev/.staging) is applied to your bundle identifier to allow multiple versions to be installed on a single device.
When editing Info.plist, you can notice a $(BUNDLE_SUFFIX) appended to the initial identifier: keep it in place to enable suffix mechanism described above.
Open ios/rnscaffold/Info.plist and edit the value associated with CFBundleDisplayName.
As we're using product flavors to handle environments, open android/app/build.gradle and change the app_name string value for each product flavor (default is {Dev/Staging} RN Scaffold).
Delete the app from the target simulator and re-run npm run ios-dev or npm run android-dev.
You can visit the Apple Developer portal to setup signing certificates, or use automatic signing right in Xcode. Also, you can use Fastlane to generate certificates, please see dedicated section.
Follow instructions here on how to generate a signing key. Add your release keystore in the android/app directory, then open android/gradle.properties and add your own values in the last section (key names start with _RELEASE__).
The scaffold is completely empty, there's a single view as entry point. You can add your own routing using the included React Navigation library; documentation can be found here.
If you plan to use any of Firebase products, the following steps are mandatory.
Create the Firebase app and add the generated GoogleService-Info.plist downloaded (instructions here).
Open ios/rnscaffold/AppDelegate.m and uncomment the following lines:
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
Do not uncomment without adding the config file, this would lead to a mysterious crash on launch.
Create the Firebase app and add the generated google-services.json downloaded (instructions here).
The scaffold includes Analytics and Messaging integrations. Feel free to add any additional depending on your needs, refer to the library documentation (section Quick start then check if there is any platform-specific configuration step).
This library allows to handle multiple environments. Official documentation can be found here.
The scaffold comes with built-in environments: dev, staging and production, and associated npm scripts. You can switch environment using the following:
npm run {ios/android}-{dev/staging/production}
To use values, simply import the library:
import env from 'react-native-config';
<Text>Current env. is: {env.ENVIRONMENT}</Text>
You can find an example in App.js.
You can edit values in .env (development), .env.staging (staging) and .env.production (production) environment. Default is a single value ENVIRONMENT containing the environment name.
Each time you want to switch environment, you need to re-run the app from scratch (such as npm run ios-dev), not just restart the packager.
Scripts can be executed through npm using npm run {scriptName}.
"ios-dev": // Run the dev version on iOS simulator
"android-dev": // Run the dev version on Android simulator
"ios-staging": // Run the staging version on iOS simulator
"android-staging": // Run the staging version on Android simulator
"ios-production": // Run the production version on iOS simulator
"android-production": // Run the production version on Android simulator
"assemble-android-dev": // Assemble a debug build with dev version on Android
"assemble-android-staging": // Assemble a debug build with staging version on Android
"assemble-android-production": // Assemble a release build with production version on Android
"start": // Starts the React Native packager
[iOS] Error 65
This error can occur in many different situations. The most common fix you would better try first is to completely remove build folder ios/build, then re-run npm run ios-dev.
The app crashes on launch without any additional log. This may occur when Firebase tries to instantiate but cannot find configuration files. Refer to the related section and check whether config files are loaded as expected.