Code Monkey home page Code Monkey logo

kit-lab's Introduction

React Native Typescript Boilerplate

A lot of fundamental features with Typescript support React Native Boilerplate

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Typescript Boilerplate

๐Ÿฅณ Version 4.2.0 is here ๐Ÿ˜

We're proudly announce that Version 4.2.0 is here!

  • Zustand integration with cool slices ๐Ÿป
  • Latest MMKV Integration with Zustand
  • 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

  • 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

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

  • 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
  • react-native-mmkv will be re-implement when the issue is resolved on RN 71+
  • Zustand Separated Documentation with Example
  • 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.

kit-lab's People

Contributors

clin211 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.