Introdution

Easy to start
React native version 0.63.4
Fully using typescript for typing
Folder structs using package-by-feature (why)
Redux, redux-saga, redux-persist, redux-logger
React navigation v5
100% functional component with hook
Alot of custom components
i18next for multiple language
Custom hooks for share state logic between components
Eslint using prettier plugin for checking code convention
Husky for pre-commit (we check lint have no errors first when commit)

Getting Started

Clone this repo, git clone https://github.com/amela-technology/react-native-templet-v1.git <your project name>
Go to project's root directory, cd <your project name>
Remove .git folder, rm -rf .git
Open package.json and change the name property with your project name
Open app.json and replace 'ReactNativeBase' by your project name
Remove to line 35, 36 android & ios in .gitignore
Run yarn or npm install to install dependencies
Run npm run init-project to create iOS & Android Folders.
Run your project with npm run android or npm run ios
If using codepush, replace project-name in package.json by your project name in appcenter.

Getting Started IOS

Check workspaces of project in project/ios/${PROJECT_NAME}.xcworkspace
Go to Project workspaces in Xocde delete everything except project name
Should delete them in pod file
Setup react-native config following guide: https://docs.google.com/document/d/1sPg4N7iXEgD_NzbXBRD_SzHPo4p48uJIgG_fC9hK48s

Note: Fix error "No permission handled detected".

Add this line to Info.plist:

<key>NSCameraUsageDescription</key>
<string>YOUR TO REQUEST CAMERA PERMISSION</string>

======= Add to Podfile:

target 'YourAwesomeProject' do #... permissions_path = '../node_modules/react-native-permissions/ios' pod 'Permission-Camera', :path => "#{permissions_path}/Camera" end


Run `yarn` and `rebuild project`

## Getting Started Android

1. Setup modalize following guide: https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION
2. Setup react-native config following guide: https://docs.google.com/document/d/1sPg4N7iXEgD_NzbXBRD_SzHPo4p48uJIgG_fC9hK48s

## Available Scripts

If Yarn was installed when the project was initialized, then dependencies will have been installed via Yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for Yarn and NPM at the time of this writing.

### `npm start`

Runs your app in development mode.

npm start --reset-cache

or

yarn start --reset-cache


#### `npm test`

Runs the [jest](https://github.com/facebook/jest) test runner on your tests.

#### `npm run ios`

Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.

#### `npm run android`

Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). We also recommend installing Genymotion as your Android emulator.

#### `npm lint`

Run linter check source code

#### `npm lint-fix`

Run linter fix source code

#### `npm assets-link`

Link assets and font from **src/assets** to Native project

## Folder structures

. folder contain file to fixing, batch lib ├── scripts │ ├── react-native-keyboard-aware-scroll-view │ │ └── lib │ │ ├── KeyboardAwareFlatList.js │ │ └── KeyboardAwareScrollView.js │ ├── react-native-size-matters │ │ └── scaling-utils.js │ └── fix-lib.sh | folder contain source code of project ├── src | | folder contain api content of project │ ├── api │ │ ├── modules │ │ │ └── api-app │ │ │ └── general.ts │ │ ├── request.ts │ │ └── urls.ts │ ├── assets │ │ ├── fonts │ │ │ ├── Montserrat-Light.ttf │ │ │ ├── Montserrat-Regular.ttf │ │ │ └── Montserrat-SemiBold.ttf │ │ ├── icon │ │ │ ├── ic_back.png │ │ │ ├── ic_check_radio.png │ │ │ ├── ic_home.png │ │ │ ├── ic_notification.png │ │ │ ├── ic_select.png │ │ │ ├── ic_setting.png │ │ │ └── ic_uncheck_radio.png │ │ ├── locates │ │ │ ├── en.ts │ │ │ └── jp.ts │ │ ├── images.ts │ │ ├── metrics.ts │ │ ├── sizes.ts │ │ └── themes.ts │ ├── components │ │ ├── base │ │ │ ├── modal │ │ │ │ ├── DialogComponent.tsx │ │ │ │ ├── ModalComponent.tsx │ │ │ │ ├── useLoading.tsx │ │ │ │ └── useModal.tsx │ │ │ ├── picker │ │ │ │ └── StyledPicker.tsx │ │ │ ├── StyledButton.tsx │ │ │ ├── StyledIcon.tsx │ │ │ ├── StyledImage.tsx │ │ │ ├── StyledInput.tsx │ │ │ ├── StyledList.tsx │ │ │ ├── StyledNoData.tsx │ │ │ ├── StyledOverlayLoading.tsx │ │ │ ├── StyledSectionList.tsx │ │ │ ├── StyledText.tsx │ │ │ ├── StyledTouchable.tsx │ │ │ └── index.ts │ │ └── common │ │ └── Browser.tsx │ ├── feature │ │ ├── authentication │ │ │ ├── components │ │ │ │ └── Logo.tsx │ │ │ ├── ForgotPwdScreen.tsx │ │ │ ├── LoginScreen.tsx │ │ │ └── RegisterScreen.tsx │ │ ├── home │ │ │ ├── components │ │ │ │ └── HomeTabs.tsx │ │ │ └── HomeScreen.tsx │ │ ├── notification │ │ │ ├── components │ │ │ │ └── HomeTabs.tsx │ │ │ └── NotificationScreen.tsx │ │ └── setting │ │ ├── components │ │ │ └── HomeTabs.tsx │ │ └── SettingScreen.tsx │ ├── hooks │ │ ├── useApi.ts │ │ ├── useInput.ts │ │ └── usePaging.ts │ ├── navigation │ │ ├── components │ │ │ └── StyledTabBar.tsx │ │ ├── config │ │ │ ├── options.ts │ │ │ ├── routes.ts │ │ │ └── transition.ts │ │ ├── scene │ │ │ └── RootScenes.tsx │ │ └── NavigationService.ts │ ├── redux │ │ ├── authentication │ │ │ ├── actions.ts │ │ │ ├── reducer.ts │ │ │ └── types.ts │ │ ├── resource │ │ │ ├── actions.ts │ │ │ ├── reducer.ts │ │ │ └── types.ts │ │ ├── rootReducer.ts │ │ ├── rootSaga.ts │ │ └── store.ts │ ├── utilities │ │ ├── authenticate │ │ │ ├── AuthenticateService.ts │ │ │ └── TokenProvider.ts │ │ ├── types │ │ │ └── typing.d.ts │ │ ├── upload │ │ │ ├── ImageUploader.ts │ │ │ └── awsApi.ts │ │ ├── helper.ts │ │ ├── i18next.ts │ │ └── moment.ts │ ├── App.tsx │ └── AppContext.tsx ├── README.md ├── app.json ├── babel.config.js ├── index.js ├── jest.config.js ├── metro.config.js ├── package.json ├── react-native.config.js ├── settings.json ├── tsconfig.json └── yarn.lock

38 directories, 88 files

tuanthanh0210/react-native-templet-v1

Table of Contents

Introdution

Getting Started

Getting Started IOS

or