A React Native boilerplate app to bootstrap your next app!
# Setup your project
> npx degit IronTony/react-native-boilerplate-starter-app your-new-app
> cd your-new-app
# Install dependencies
> yarn
# if needed, setup iOS development environment
yarn setup:ios
See environment
section for how to configure env variables.
See scripts
section for how to run the app.
To rename the project and bundles, just follow these steps:
Run npx react-native-rename [name] -b [bundle-identifier]
from the project root
Example: npx react-native-rename "Test New App" -b com.webbable.testnewapp
React Native Starter App
environments variables management is based on a custom script and the app.json
config file.
Define your environment variables inside app.json
inside the environments
object under the desired environment key (such as development
, staging
or production
) and then run the app for the required env using one of the available run scripts (e.g. ios:dev
).
If you want to use IDEs such Xcode or Android Studio, you have to set up the ENV variables with these commands:
yarn env:dev
, to set the development ENV variablesyarn env:stage
, to set the staging ENV variablesyarn env:prod
, to set the production ENV variablesTo run the app use one of the following scripts:
yarn android:dev
, to start the app on Android with the development
environment variables.
yarn android:stage
, to start the app on Android with the staging
environment variables.
yarn android:prod
, to start the app on Android with the production
environment variables.
yarn ios:dev
, to start the app on iOS with the development
environment variables.
yarn ios:stage
, to start the app on iOS with the staging
environment variables.
yarn ios:prod
, to start the app on iOS with the production
environment variables.
To setup the app icons:
1024x1024px
/assets
folder as icon.png
yarn assets:icons
To setup the app splashscreen:
1242x2208px
/assets
folder as splashscreen.png
yarn assets:splashscreen
To setup the environment to run on iOS, run
yarn setup:ios
this will run cocoapods
to install all the required dependencies.
The use of Typescript in the project is not mandatory. You can just write all your code using plain Javascript. Our hint is to create all files as below:
tsx
extensionts
extensionTo enable full Typescript checks, just open the tsconfig.json
file and chage as below:
"noImplicitAny": true, // set to true to be explicit and declare all types now<br/>
"strict": true, // enable it to use fully Typescript set of invasive rules<br/>
REMEMBER: the entry point file in the root of the project MUST be index.js
✅ Initial Setup
✅ Add Splashscreen (https://github.com/crazycodeboy/react-native-splash-screen)
✅ Add Toolbox (https://github.com/panz3r/react-native-toolbox)
✅ Create tree folders structure
✅ Add redux-toolkit
✅ Add redux-persist
(https://github.com/rt2zz/redux-persist)
✅ Add React Native Debugger
✅ Add redux-saga
✅ Add i18next
✅ Add react-navigation v5
❤️
✅ Add UI Design System (NativeBase
)
✅ Add Env
variables selection experimental way ⚗️ ⚗️ ⚗️
✅ Add Typescript (optional use. Read the DOC above)
✅ Add Travis
✅ Add DependaBot
🚧 GraphQL (Apollo client)
🚧 Shared Elements animation
Author: IronTony
Source Code: https://github.com/IronTony/react-native-boilerplate-starter-app
#react #react-native #mobile-apps