Git Product home page Git Product logo

wrathchaos / react-native-typescript-redux-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
16.0 3.0 1.0 26.46 MB

Awesome fundamental features with Typescript support and ready to use Redux implementation React Native Boilerplate

Home Page: https://freakycoder.com

JavaScript 5.38% TypeScript 43.83% Ruby 1.92% Starlark 0.91% Java 24.61% Makefile 2.30% C++ 10.55% Objective-C 3.64% Objective-C++ 6.85%
app app-development apple boilerplate development freakycoder front-end google javascript kuray

react-native-typescript-redux-boilerplate's Introduction

React Native Typescript Redux 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 Redux Boilerplate

๐Ÿฅณ Version 3.4+

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

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

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

Are you looking for Non-Redux Version?

๐Ÿ”ฎ 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, [email protected]

License

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

react-native-typescript-redux-boilerplate's People

Contributors

wrathchaos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

wasiquehaider

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.