React Native boilerplate that can be used to start a new mobile application.
-
Redux Redux is a predictable state container for JavaScript apps
-
Redux Persistor Persist and rehydrate a redux store
-
Redux Sagas Library that aims to make application side effects (i.e. asynchronous actions like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easier to test, and better at handling failures
-
Eslint Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs
-
Prettier An opinionated code formatter supported by many languages
-
Axios Promise based HTTP client for the browser and node.js. Includes GET and POST endpoints examples
-
password-validator Used to validate the password on the authentication flow
-
React Navigation v5.x Routing and navigation for your React Native apps
-
React Native Rename Rename react-native app with just one command
-
Neox Makes redux state immutable
-
Redux Logger Production Redux logging tool that lets you replay problems as if they happened in your own browser
- Start the app:
yarn run android
oryarn run ios
- Start metro bundler:
yarn start
- Lint the app:
yarn run lint
- Test the app:
yarn run test
- Clean the app:
yarn run clean
Command to rename the app: npx react-native-rename <newName> -b <bundleIdentifier>
Note: After renaming the app you need to clean every build folder and remove node_modules
- Install dependencies:
yarn install
- Create a .env file in the root directory of the project. You can use the .env.example file to know which variables you need.
- Create a .env file in the root android directory of the project. You can use the .env.example file to know which variables you need.
- Rename the project with react-native-rename
- Start the app:
yarn start
Create a debug key in android/app
with the command:
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
Run the following command inside the ios folder:
pod install
The development/production key is used to ensure that you are a developer from the project. The .aab file on the other hand, short for 'Android App Bundle', is used to upload apps to Google Play.
cd android/app
- if development environment:
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
- if production environment
keytool -genkey -v -keystore fc-production.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Before creating it, check the following:
- You have the correct development/production key in
android/app
- Make sure you have the correct configuration set in
android/.env
Steps
- Run the command
cd android && ./gradlew clean
- Go the root of the project and run
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
- Bump versionCode by one and change versionNumber to suit your needs in
android/app/build.gradle
- Run the command
./gradlew bundleRelease
(This creates the aab file) - Go to Google Play Console and select the Release method of your preference
- Create a new release, and drag the new aab file (under android/app/build/outputs/bundle/release) into the build section
- Save the build, and then send it to review (this will eliminate the previous version and upload this one)
- Apple Development (for each Developer that will have access to deploy)
- Apple Distribution (for the App)
- iOS App Provisioning Profile (for the App)
In order to create a certificate we need to create a .cer file, which is a security file provided by a third party Certificate Authority, used to validate you are who you say you are. Certificates are needed to upload to TestFlight for the same reason.
- Open your Keychain
- Go to KeychainAccess/CertificatesAssistant/Solicitar un Certificado de una Autoridad de Certificacion
- Fill in your name and email, and leave the CA email field empty
- Save the file on disk and allow to change the location and hit next
- Select the location where you want the file to be saved
- Create a .cer file
- Go to developer.apple.com and on the left panel press on Certificates, IDs & Profiles
- Click on the plus sign to create the certificate which best suits your needs with the .cer file you just created
- Observation: To create the Provisioning Profile, you need to go to the Profiles section and have already created the Apple Distribution certificate
- Select your target and in the General section, update your Version and Build accordingly
- In XCode select Product/Destination/Any iOS device
- In XCode select Product/Archive
- In the window that popped up (or go to Window/Organizer) select Distribute App
- Select App Store Connect then Upload, then uncheck both checkboxes and press on Next
- Press on Automatically Manage Signing and then Next
- In Apple Developer Connect you will notice the build will be uploading. When it finishes uploading, you will need to update a questionnaire (saying if it had any changes from the last time you uploaded a build)
There are several examples of different types of navigations in different branches.
Uses a Stack Navigator. documentation Uses an Auth-first navigation flow.
Uses a simple Stack Navigator. documentation Lets you navigate through the app without being authed, but certain features need to be accessed with auth. As an example of an authed screen you can see ScreenThree.
Uses a Tab Navigator nested in a Stack Navigator. documentation Uses an Auth-first navigation flow.
Uses a Tab Navigator nested in a Stack Navigator. documentation Lets you navigate through the app without being authed, but certain features need to be accessed with auth. As an example of an authed screen you can see ScreenThree.
Structure in nested-tab-in-stack branch]
In the branch nesting-navigators
you can find an example of a tab navigator nested inside a stack navigator:
- MainStack (Stack)
- Modal Stack Navigator (Stack)
- Main Stack Navigator (Stack)
- Tan Navigator (Tab)
- Welcome Stack (Stack)
- Welcome Screen (Screen)
- Screen 2 (Screen)
- Screen 3 (Screen)
- Account (Screen)
- Settings (Screen)
- Welcome Stack (Stack)
- Tan Navigator (Tab)
Good practices when nesting navigators
You will notice both OS already have a Splash Screen set, so you just need to change it.
- Remove the file
splash_screen
in every mipmap folder inandroid/app/src/main/res
- Add your own
splash_screen
files in every different mipmap size folder
- Open Xcode and select
[project_name] > [project_name] > Imagex.xcassets
- In the SplashScreen Image Set, change the images to your project ones
- Select
[project_name] > [project_name] > LaunchScreen.storyboard
- Verify that the new image is correctly centered and adapt it to your needs
Tip When adjusting the image, go to the Show Size Inspector
on the right drawer and select the inner arrows in the Autoresizing Mask
Go to android/app/src/main/res
and drag your set of folders with the new icons, you should have a set of mipmap
folders, one for each resolution.
You can create your set here: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
, don't forget to create rounded ones.
Via Xcode, go to the Images.xcassets
, create a new set of images named AppIcon
and then drag your folder with the new icons.
You can create your set of icons for iOS using: https://appicon.co/
This app comes with an authentication flow already integrated with our node boilerplate. The methods we provide are: Login, Sign up and Logout. The app does not show the Welcome
screen if the user is not logged in and has a token stored on the device.