Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IronTony/react-native-redux-toolkit-starter-app
📱🚀A POWERFUL React Native starter kit to bootstrap the start of your mobile app development
https://github.com/IronTony/react-native-redux-toolkit-starter-app
i18next react-native redux redux-saga redux-toolkit reselect splashscreen starter-kit
Last synced: 3 months ago
JSON representation
📱🚀A POWERFUL React Native starter kit to bootstrap the start of your mobile app development
- Host: GitHub
- URL: https://github.com/IronTony/react-native-redux-toolkit-starter-app
- Owner: IronTony
- License: mpl-2.0
- Created: 2020-01-09T16:23:25.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T02:17:34.000Z (9 months ago)
- Last Synced: 2024-06-03T23:48:43.456Z (5 months ago)
- Topics: i18next, react-native, redux, redux-saga, redux-toolkit, reselect, splashscreen, starter-kit
- Language: TypeScript
- Homepage:
- Size: 12.2 MB
- Stars: 360
- Watchers: 6
- Forks: 58
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/IronTony/react-native-react-query-starter-app) 🔥🔥
[](LICENSE)
[](#contributors-:sparkles:)
[](https://github.com/IronTony/react-native-redux-toolkit-starter-app/issues)
[](https://travis-ci.com/IronTony/react-native-redux-toolkit-starter-app)
[](https://github.com/IronTony/react-native-redux-toolkit-starter-app)
[](https://github.com/IronTony/react-native-redux-toolkit-starter-app)
# Table of Contents
- [🔥🔥🔥 Upgraded to the latest React-Native (\> 0.72.x) with brand New Architecture (Fabric) 🔥🔥🔥](#-upgraded-to-the-latest-react-native--072x-with-brand-new-architecture-fabric-)
- [🔥🔥 Checkout also my brand new React Native React-Query (no redux toolkit) here 🔥🔥](#-checkout-also-my-brand-new-react-native-react-query-no-redux-toolkit-here-)
- [Installation :inbox\_tray:](#installation-inbox_tray)
- [Rename project and bundles :memo: :package:](#rename-project-and-bundles-memo-package)
- [iOS \& Android](#ios--android)
- [Environment Setup :globe\_with\_meridians:](#environment-setup-globe_with_meridians)
- [Scripts :wrench:](#scripts-wrench)
- [Run the app](#run-the-app)
- [Generate app icons](#generate-app-icons)
- [Generate Splashscreen](#generate-splashscreen)
- [To enabled React-Native (Fabric) new architecture](#to-enabled-react-native-fabric-new-architecture)
- [Setup iOS](#setup-ios)
- [Typescript (optional)](#typescript-optional)
- [ATTENTION Circular dependencies script checker](#attention-circular-dependencies-script-checker)
- [Roadmap :running:](#roadmap-running)
- [Screenshots](#screenshots)
- [Contributors :sparkles:](#contributors-sparkles)
- [License :scroll:](#license-scroll)
---
## Installation :inbox_tray:
```bash
# 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`](#environment-setup-:globe_with_meridians:) section for how to configure env variables.
See [`scripts`](#scripts-:wrench:) section for how to run the app.
---
## Rename project and bundles :memo: :package:
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 :globe_with_meridians:
`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 :wrench:
### 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
```sh
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
```sh
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
```sh
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](https://reactnative.dev/docs/new-architecture-intro)
### Setup iOS
To setup the environment to run on iOS, run
```sh
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
"strict": true, // enable it to use fully Typescript set of invasive rules
```
_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 :running:
✅ 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 :sparkles:
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
---
## License :scroll:
Licensed under [Mozilla Public License Version 2.0](LICENSE)
