gys-dev / RNHooksTypescript

Base source React-Native use Hook and Typescript

Help manage code better

Table of Contents

• Build App
• Library Use
• Structure Project

Build

Install library:

$ yarn install

Build ios:

$ yarn pod-ios
$ yarn run-ios

Build android:

Create file local.properties in folder android, add "sdk.dir=..."

$ yarn run-android

Library

• react-navigation Link.
• axios Link.
• react-redux Link.
• redux-persist Link.
• async-storage Link.
• encrypted-storage Link.
• localization Link.

Structure

• Common
  • Components
  • Constants
• Features
• Navigation
• Resources
  • Assets
  • Fonts
  • Localization
  • Theme
• Services
• Store
• Utilities

Common

• Where files are shared in the project.

  Components

  • A place for commonly used components in the features
  • Divide Components into groups with similar characteristics

  Constants

  • Dimens: Common dimension in ui design
  • Limits: Define text box character limit
  • Spacing: Common spacing in ui design
  • Type: Universal type used in all applications
  • Typography: Define typography used in all applications

Features

• Manage the UI and logic of the screens.

Navigation

• Manage the app's navigator.

Resources

• Manage houses static files (e.g images, color) used in the application.

  Assets

  • Where the image static files are located.

  Fonts

  • Where the font static files are located.

  Localization

  • Where the language static files are located.

  Theme

  • Where the theme static files are located.

Services

• This directory manages logic related to external API communication.

Store

• My point is that only data that is used in common across multiple monitors will be saved to redux. So I separate redux from screen, to easily manage action and state of redux

Utilities

• Where to manage utility files (function).

Config

Briefly go over the various config files used in this project

• tsconfig.json: These options relate to how your TypeScript or JavaScript project is set up.
• babel.config.js: Configure import files for the project.
• .eslintrc.js: This is the configuration used to set the rule code in the project. Includes relevant configuration for use with Typescript and Prettier.
• .prettierrc.js: The config for the Prettier code formatter.