react-native-typescript-boilerplate
v4.1.0
Published
<img alt="React Native Typescript Boilerplate" src="assets/logo.png" width="1050"/>
Downloads
102
Readme
🥳 Version 4.0.0 is here 😍
We're proudly announce that Version 4.0.0
is here!
- Better built-in theming support with React Navigation
- Native Splash Screen
- New React Native Architecture Ready (RN 0.73+) 🍻
- Awesome Theme Support for both Light / Dark Mode 🌙
- Latest
React
andReact Native
Dependencies 🌟 - All Dependencies are Upgraded
- New GIF with the Project Example for Theming
- Much Better Documentation
- Detailed Roadmap
🐶 What's Included?
Typescript
Flipper Ready
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
Awesome React Native Helpers Integration
- Noth Detection Support
- Better Dimension Helper (Ex: ScreenWidth, ScreenHeight)
- Cool Text Helpers
React Native Vector Icons
Localization (Multi-Language Support)
HTTP Network Management
- Axios
- Axios Hooks
- API Service with Usage Examples
Built-in EventEmitter
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
- Ready to command husky setup with
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
- All you need to do is copy-paste the .tff files into
Better Eslint and Prettier
- Auto import order dependency
- Battle proof linting and prettier rules
- Ready to use
.eslintrc.js
and.prettierrc.js
PrivacyInfo.xcprivacy
added for iOSMore and more! :)
🚀 Getting Started
Quick Start
To create a new project using the barebone boilerplate:
git clone https://github.com/WrathChaos/react-native-typescript-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
OR
rm -rf .git README.md
rm -rf ./assets
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
🔮 Roadmap
- [x] ~~LICENSE~~
- [x] ~~Better Husky: Linter, Prettier and Commintlint~~
- [x] ~~Removal of
react-native-animated-splash-screen
~~ - [x] ~~New Theme Support with React Navigation~~
- [x] ~~Implement the native splash screen with react-native-splash-screen~~
- [x] ~~Better and separated documentation~~
- [x] ~~Axios Hooks~~
- [x] ~~React Native New Architecture~~
- [ ]
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 - [ ] 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, [email protected]
License
React Native Typescript Boilerplate is available under the MIT license. See the LICENSE file for more info.