!Platform - Android and iOS

src="assets/react-native-typescript-boilerplate.gif" height="650" width="325" />

🥳 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 and React 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
- 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
- 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 iOS

- More and more! :)

🚀 Getting Started

Quick Start

To create a new project using the barebone boilerplate:

``sh
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

`jsx
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)

`sh
npx react-native-rename
`

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

`sj
npx react-native-rename -b
`

$3

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

$3

- 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

- Components
- Axios Hooks
- Event Emitter Usage
- Project Structure

🔮 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, kurayogun@gmail.com

License

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