Skip to content

πŸ“±πŸš€A POWERFUL React Native starter kit to bootstrap the start of your mobile app development

License

Notifications You must be signed in to change notification settings

IronTony/react-native-redux-toolkit-starter-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Native Redux Toolkit Start App

A React Native boilerplate app to bootstrap your next app with Redux Toolkit and Saga!

πŸ”₯πŸ”₯πŸ”₯ Upgraded to the latest React-Native (> 0.72.x) with brand New Architecture (Fabric) πŸ”₯πŸ”₯πŸ”₯


πŸ”₯πŸ”₯ Checkout also my brand new React Native React-Query (no redux toolkit) here πŸ”₯πŸ”₯

License All Contributors

Issues

Build

Build Build

Buy Me A Coffee

Table of Contents


Installation πŸ“₯

# Setup your project
> npx degit IronTony/react-native-redux-toolkit-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.


Rename project and bundles πŸ“ πŸ“¦

To rename the project and bundles, just follow these steps:

iOS & Android

Run npx react-native-rename [name] -b [bundle-identifier] from the project root

Example: npx react-native-rename "Test New App" -b com.testnewapp


Environment Setup 🌐

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 variables
  • yarn env:stage, to set the staging ENV variables
  • yarn env:prod, to set the production ENV variables

If you want to use this in any file, just:

import env from '@env';

and use like this:

env.API_URL


Scripts πŸ”§

Run the app

To 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.

If using the ios commands you will receive an error like this:

Just do the following steps:

  • Launch Xcode
  • Settings
  • Locations

Make sure there's a dropdown option selected for the command line tools NOTE: Even if you're seeing Command Line Tools dropdown being selected with proper version, you might want to re-select it again. It will ask for login password.

REMEMBER: The Command Line Tools should be the latest one or the one matching your Xcode version

Generate app icons

To setup the app icons:

  • create an image at least 1024x1024px
  • place it under /assets folder as icon.png
  • run
yarn assets:icons

Generate Splashscreen

To setup the iOS app splashscreen:

  • create an image at least 1242x2208px
  • place it under /assets folder as ios_splashscreen.png
  • run
yarn assets:splashscreen:ios

To setup the Android app splashscreen:

  • create an image at least 150x134px
  • place it under /assets folder as android_splashscreen.png
  • run
yarn assets:splashscreen:android

If you want to customize the output icon, open the package.json file and customized the backgtound color, size, ..... in the following command assets:splashscreen:android

To enabled React-Native (Fabric) new architecture

Check the official documentation here

Setup iOS

To setup the environment to run on iOS, run

yarn setup:ios

this will run cocoapods to install all the required dependencies.

Typescript (optional)

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:

  • files with logic and Views with tsx extension
  • files with Stylesheet and others with ts extension

To 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


ATTENTION Circular dependencies script checker

If running this script dependencies:graph, you get this error: Error: Graphviz could not be found. Ensure that "gvpr" is in your $PATH

If you are on a Mac: brew install graphviz On Windows, after installation, do this:

Roadmap πŸƒ

βœ… Initial Setup
βœ… react-native-bootsplash (https://github.com/zoontek/react-native-bootsplash)
βœ… react-native-toolbox to generate Splashscreen and icons automagically (https://github.com/Forward-Software/react-native-toolbox)
βœ… Standard tree folders structure
βœ… React-Native 0.72.6
βœ… redux-toolkit
βœ… redux-persist (https://github.com/rt2zz/redux-persist)
βœ… React Native Debugger
βœ… redux-saga
βœ… i18next
βœ… react-navigation v6 ❀️
βœ… Tamagui as design system
βœ… Env variables selection experimental way βš—οΈβš—οΈβš—οΈ
βœ… Typescript (optional use. Read the DOC above)


Screenshots


Contributors ✨

Thanks goes to these wonderful people (emoji key):


IronTony

πŸ€” πŸ’» πŸ“– πŸ› 🚧 πŸ“¦ πŸ’¬ πŸ‘€ ⚠️ πŸ’‘

This project follows the all-contributors specification. Contributions of any kind welcome!


License πŸ“œ

Licensed under Mozilla Public License Version 2.0