rntypescriptboilerplate

🥳 Version 3.5 is here 😍

We're proudly announce that Version 3.5 is here!

• Native Splash Screen
• New React Native Architecture Ready (RN 0.71+) 🍻
• 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

• 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-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
• 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

• 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
• [ ] Redux 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, [e-mail]

License

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