Code Monkey home page Code Monkey logo

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

View Code? Open in Web Editor NEW
48.0 3.0 8.0 34.66 MB

๐Ÿš€ All-in-one Zustand and MMKV Integrated React Native Typescript Boilerplate, Ready to Start ๐Ÿฅณ

Home Page: https://freakycoder.com

JavaScript 10.24% TypeScript 68.65% Ruby 5.73% Objective-C 6.02% Objective-C++ 2.13% Shell 0.44% Kotlin 6.79%
android app apple application boilerplate developer front-end google ios mobile react-native react-native-boilerplate reactjs typescript zustand react-native-typescript-zustand-boilerplate react-native-zustand

react-native-typescript-zustand-boilerplate'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.

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

Contributors

wrathchaos avatar

Stargazers

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

Watchers

 avatar  avatar  avatar

react-native-typescript-zustand-boilerplate's Issues

The workspace named "rntypescriptBoilerplate" does not contain a scheme named "rntypescriptBoilerplate"

Just installed the latest version of react-native-typescript-zustand-boilerplate.

I can get it to run using Xcode but when I try to run it using the command line (Terminal) I get the following error:

error Failed to build iOS project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'rntypescriptBoilerplate.xcworkspace'.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace rntypescriptBoilerplate.xcworkspace -configuration Debug -scheme rntypescriptBoilerplate -destination id=970E7D0A-2E36-4317-A3D0-57FE77AFF2FF

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES


2024-03-02 00:15:59.668 xcodebuild[12405:106552] Writing error result bundle to /var/folders/nh/8_l342hx2ll8psk4wpphm2fr0000gn/T/ResultBundle_2024-02-03_00-15-0059.xcresult
xcodebuild: error: The workspace named "rntypescriptBoilerplate" does not contain a scheme named "rntypescriptBoilerplate". The "-list" option can be used to find the names of the schemes in the workspace.

Node: 18.12.1
Xcode: Version 15.2 (15C500b)
Simulator: iPhone 15 Pro Max (17.2)
Cocoapods: 1.15.2
React Native: 0.73.3
macOS: Sonoma: 14.1.1

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.