Skip to content

Latest commit

 

History

History
238 lines (199 loc) · 7.35 KB

README.md

File metadata and controls

238 lines (199 loc) · 7.35 KB
Raw

React Native Template Starter

demo.mp4

Document table of contents

✅ 01 - How to change app logo

✅ 02 - How to change splash screen

✅ 03 - How to keep code changed from node_modules

With Fue Cli Source

Create project with fue

npx fue-cli new

Generate code with fue

In root

  1. Generate widget (default dir: src/components/widgets) fue g widget widget-name --reactnative
  2. Generate modal (default dir: src/components/modals) fue g modal modal-name --reactnative
  3. Generate module (default dir: src/modules) fue g module module-name --reactnative
  4. Generate form (default dir: src/components/forms) fue g form form-name --reactnative
  5. Generate in form a specify dir fue g form a/b/c/form-name --reactnative

In module

  1. Generate widget fue g widget widget-name --reactnative --module=auth
  2. Generate modal fue g modal modal-name --reactnative --module=auth
  3. Generate module fue g module module-name --reactnative --module=auth
  4. Generate form fue g form form-name --reactnative --module=auth
  5. Generate screen fue g screen screen-name --reactnative --module=auth
  6. Generate in form a specify dir fue g form a/b/c/form-name --reactnative

Features and Roadmap

  • ✅ Navigation v6
  • ✅ Theme by restyle
  • ✅ Splash screen
  • ✅ State management
  • ✅ Multi env: dev, stg, prd
  • ✅ Multi language
  • ✅ Validate form
  • ✅ Integrate api
  • ✅ Git Hooks with Husky

Dependencies and Libraries

Package Version
React navigation v6
@shopify/restyle ^2.1.0
axios ^0.27.2
i18next ^21.8.11
react-hook-form ^7.33.0
react-native 0.72.5
react-native-bootsplash ^5.0.3
react-native-config ^1.5.1
react-native-mmkv ^2.10.2
react-native-reanimated ^3.5.4
yup ^0.32.11
zustand ^4.4.2

Quick Start

Require environment:

  • XCode >= 13.2.1, Android Studio, JDK 11
  • NodeJS v16.17.0, Yarn v1.22.19
  • Code editor: VScode, ext (Auto Rename Tag, Code Spell Checker, Color Highlight, Error Lens, ES7+ React/Redux/React-Native snippets, ESLint, Import Cost, Prettier - Code formatter, Rainbow Brackets)
  • Setting up the development environment: React Native

Run the CLI:

# pull source from cli
npx fue-cli new

# pull source from git
git clone https://github.com/bonnguyenitc/react-native-starter.git

# install:
yarn

# run application android development
yarn android:dev
yarn android:stg
yarn android:prod

# run application iOS development
yarn ios:dev
yarn ios:stg
yarn ios:prod

# build release with cmd
./deploy.sh

And more in package.json. Check it!

Rules and Conventions for development

  • Airbnb JavaScript Style Guide LINK
  • Naming
    • Folder, File : kabab-case (name-file.tsx)
    • Hook file, naming variables, functions, classes, interfaces, types, enums: camelCase (useHook)

Structure of the project

├── Gemfile
├── README.md
├── __mocks__
├── __tests__
├── android
├── app.json
├── assets
├── babel.config.js
├── bin
├── index.js
├── ios
├── jest
├── jest.config.js
├── metro.config.js
├── package.json
├── patches
├── react-native.config.js
├── scripts
├── src
│   ├── app.tsx
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── index.ts
│   │   └── jsons
│   ├── components
│   │   ├── form
│   │   ├── modals
│   │   └── widgets
│   │       ├── align
│   │       ├── app-bar
│   │       ├── box
│   │       ├── button
│   │       ├── card
│   │       ├── center
│   │       ├── col
│   │       ├── if
│   │       ├── image
│   │       ├── index.ts
│   │       ├── positioned
│   │       ├── row
│   │       ├── screen
│   │       ├── space
│   │       ├── spinner
│   │       ├── stack
│   │       ├── switch
│   │       ├── text
│   │       ├── text-button
│   │       ├── text-input
│   │       ├── touchable
│   │       └── wrap
│   ├── localization
│   ├── modules
│   │   ├── auth
│   │   │   ├── api
│   │   │   ├── assets
│   │   │   ├── components
│   │   │   ├── hooks
│   │   │   ├── index.ts
│   │   │   ├── routes
│   │   │   ├── screens
│   │   │   ├── stores
│   │   │   ├── types
│   │   │   └── utils
│   │   ├── error
│   │   │   ├── components
│   │   │   └── screens
│   │   └── home
│   │       ├── components
│   │       ├── routes
│   │       └── screens
│   ├── provider
│   ├── routes
│   └── common
│       ├── config
│       ├── constants
│       ├── hooks
│       ├── libs
│       ├── stores
│       ├── themes
│       ├── types
│       └── utils
├── tsconfig.json
├── tsconfig.paths.json
├── types
│   └── declarations.d.ts
├── yarn-error.log
└── yarn.lock

Folder structure of a module

├── auth
    ├── api
    ├── assets
    ├── components
    ├── hooks
    ├── routes
    ├── screens
    ├── stores
    ├── types
    └── utils

Welcome contributors from this project!!!