React-native-typescript-redux-boilerplate NPM

🥳 Version 3.3+

We're proudly announce that Version 3 is here!

Native Splash Screen
Ready to use Redux State Management
Much Better Documentation
New React Native Architecture Ready (RN 0.68+) 🍻
Detailed Roadmap
Awesome Theme Support for both Light / Dark Mode
Removed Optional Dependencies
Latest React and React Native Dependencies
All Dependencies are Upgraded
Code Refactoring
New GIF with the Project Example for Theming

🐶 What's Included?

Typescript
Flipper Ready
Redux
- Built-in Redux Services
- Redux Toolkit
Navigation System
- React Navigation 6
- React Navigation Helpers
- Ready to use Stack and Tab Screens with navigation
NEW: Built-in Theme System with Hooks
- ☀️ Light Theme Support
- 🌙 Dark Theme Support
- Dynamic Color Palette System
- Custom Font Support
- Built-in Better Text Component
Ready to use React Native Reanimated 2 Integration
Native Splash Screen Integration
- React Native Splash Screen
Awesome React Native Helpers Integration
- Noth Detection Support
- Better Dimension Helper (Ex: ScreenWidth, ScreenHeight)
- Cool Text Helpers
React Native Vector Icons
- React Native Vector Icons
- React Native Dynamic Vector Icons
Localization (Multi-Language Support)
HTTP Network Management
- Axios**
- Axios Hooks
- API Service with Usage Examples
Built-in EventEmitter
- EventBus
Babel Plugin Module Resolver
- Fixing the relative path problem
- Visit .babelrc to ready to use and more customization
Pre-commit Husky Integration
- Ready to command husky setup with npm run husky:setup
- commitlint Integration for better commit linter
- Auto prettier on pre-commit
- Awesome ESLint Integration
Built-in Custom Font Implementation
- All you need to do is copy-paste the .tff files into assets/fonts folder
- Run npx react-native-asset command
More and more! :)

🚀 Getting Started

Quick Start

To create a new project using the barebone boilerplate:

git clone https://github.com/WrathChaos/react-native-typescript-redux-boilerplate.git my-app-name

🎯 Step By Step Guide

Clean-Up & Simple Run

Clean up the files from the example repository and do not forget to install the dependencies There is a good example by default on HomeScreen. You can delete the all screens.

npm i
npm run clean-up
npm i && npx pod-install
react-native run-ios/android

rm -rf .git README.md
rm -rf ./assets
git init
npm i
npm run husky:setup
npx pod-install (iOS Only)
react-native run-ios/android

Husky Integration

Before doing anything else, please simply run the command to initalize the husky. If you do not run clean-up part you should run the husky setup by yourself

npm run husky:setup

husky:setup will handle the initialization, installation and ready to use commitlint, prettier and eslint.

Rename the project: (Thanks to react-native-name)

npx react-native-rename <your-project-name>

With custom Bundle Identifier (Android only. For iOS, please use Xcode)

npx react-native-rename <your-project-name> -b <bundleIdentifier>

Install Pods (iOS Only)

npm i
cd ios && pod install
cd .. && react-native run-ios/android

Android local.properties (Android Only)

npm i
cd android && mkdir local.properties
nano local.properties

Example of MacOS Android SDK Path

Make sure that set your right path of Android SDK

MacOS / Linux

Replace your machine name instead of username

sdk.dir=/Users/username/Library/Android/sdk

Windows

Replace your machine name instead of username

sdk.dir=/Users/username/Library/Android/sdk

cd .. & react-native run-ios/android

📃 Documentations

Are you looking for Non-Redux Version?

React Native Typescript Boilerplate

🔮 Roadmap

~~LICENSE~~
~~Better Husky: Linter, Prettier and Commintlint~~
~~Removal of react-native-animated-splash-screen~~
~~New Theme Support with React Navigation~~
~~Implement the native splash screen with react-native-splash-screen~~
~~Better and separated documentation~~
~~Axios Hooks~~
~~React Native New Architecture~~
~~Redux Fork Version~~
Babel Plugin Module Resolver Documentation with Example
Navigation Service Documentation with Example
Localization Documentation with Example
Theme Documentation with Example
FAQ Documentation
Website for the boilerplate
Splash Screen Documentation
Detox E2E Integration Fork Version
MobX State Tree Fork Version
Write an article about the lib on Medium
Write an article about the lib on DevTo

Credits

Photo by Shifaaz shamoon on Unsplash

Photo by Jamie Street on Unsplash

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Typescript Redux Boilerplate is available under the MIT license. See the LICENSE file for more info.