This project was developed by Amela Technology
Below you'll find information about performing common tasks.
- Introduction
- A. Getting started
- B. Available scripts
- C. Common errors
- D. Folder structure
- Easy to start
- React-native version 0.63.4
- Fully using typescript for typing
- Folder structure using package-by-feature (why)
- Redux-toolkit, redux-saga, redux-persist, redux-logger
- React-navigation v5
- 100% functional component with hooks
- A lot of custom/base components
- i18next for multiple languages
- Custom hooks for share state logic between components
- Eslint with Prettier plugin for checking code convention
- Husky for pre-commit (we check lint to make sure we have no errors first when commit)
- Amela React-native CLI
- Install globally package
amela-rn-cli
npm i -g amela-rn-cli
- Move to a folder you use to create new project.
- Run command below
amela-rn-cli
- Choose mode 1 - Create a new project
- Fill in these inputs: Project name, Project display name, App Code for Android keytool and repoURL in your command line.
- Press
Enter
and enjoy. - For more information about AMELA-RN-CLI, please visit https://github.com/SpQuyt/amela-rn-cli
- 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 thename
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
ornpm install
to install dependencies - Run
npm run init-project
to create iOS & Android Folders. - Run your project with
npm run android
ornpm run ios
- If using CodePush, replace
project-name
inpackage.json
by your project name in AppCenter.
- Check workspaces of project in project/ios/${PROJECT_NAME}.xcworkspace
- Go to Project workspaces in Xcode 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
- Setup modalize following guide: https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION
- Setup react-native config following guide: https://docs.google.com/document/d/1sPg4N7iXEgD_NzbXBRD_SzHPo4p48uJIgG_fC9hK48s
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.
Runs your app in development mode.
npm start --reset-cache
# or
yarn start --reset-cache
Like npm start
, but also attempts to open your app in the iOS Simulator if you're on a Mac and already had it installed.
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 for detailed setup). We also recommend installing Genymotion as your Android emulator.
Runs the jest test runner on your tests.
Run linter check source code
Run linter fix source code
Link assets and font from src/assets to Native project
- Add this line to
Info.plist
:
<key>NSCameraUsageDescription</key>
<string>YOUR TO REQUEST CAMERA PERMISSION</string>
- Add to
Podfile
:
target 'YourAwesomeProject' do
#... other code - add two line below
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
#... other code - add two line above
end
- Run
yarn
andrebuild project
. folder contain file to fixing, batch lib
├── README.md
├── __tests__
│ └── App-test.tsx
├── app.json
├── babel.config.js
├── index.js
├── jest.config.js
├── metro.config.js
├── package.json
├── react-native.config.js
├── scripts
│ ├── fix-lib.sh
│ ├── react-native-config
│ │ └── ReadDotEnv.rb
│ ├── react-native-keyboard-aware-scroll-view
│ │ └── lib
│ │ ├── KeyboardAwareFlatList.js
│ │ └── KeyboardAwareScrollView.js
│ ├── react-native-picker
│ │ └── index.d.ts
│ └── react-native-size-matters
│ └── scaling-utils.js
├── settings.json
├── src
│ ├── App.tsx
│ ├── api
│ │ ├── modules
│ │ │ └── api-app
│ │ │ ├── authenticate.ts
│ │ │ ├── general.ts
│ │ │ └── notification.ts
│ │ └── request.ts
│ ├── app-redux
│ │ ├── sagas
│ │ │ ├── userInfoSaga.ts
│ │ │ ├── rootSaga.ts
│ │ │ └── resourceSaga.ts
│ │ ├── slices
│ │ │ ├── initSlice.ts
│ │ │ ├── languageSlice.ts
│ │ │ ├── userInfoSlice.ts
│ │ │ ├── types.ts
│ │ │ └── resourceSlice.ts
│ │ ├── hooks.ts
│ │ ├── store.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
│ │ ├── images.ts
│ │ ├── locates
│ │ │ ├── en.ts
│ │ │ └── jp.ts
│ │ ├── metrics.ts
│ │ ├── photo
│ │ │ └── img_default_image.png
│ │ ├── sizes.ts
│ │ └── themes.ts
│ ├── components
│ │ ├── base
│ │ │ ├── AlertMessage.ts
│ │ │ ├── ProgressiveImage.tsx
│ │ │ ├── StyledButton.tsx
│ │ │ ├── StyledIcon.tsx
│ │ │ ├── StyledImage.tsx
│ │ │ ├── StyledIndicator.tsx
│ │ │ ├── StyledInput.tsx
│ │ │ ├── StyledInputForm.tsx
│ │ │ ├── StyledList.tsx
│ │ │ ├── StyledNoData.tsx
│ │ │ ├── StyledOverlayLoading.tsx
│ │ │ ├── StyledSectionList.tsx
│ │ │ ├── StyledText.tsx
│ │ │ ├── StyledTouchable.tsx
│ │ │ ├── StyledWebView.tsx
│ │ │ ├── index.ts
│ │ │ ├── list-view-selected
│ │ │ │ ├── StyledListViewSelected.tsx
│ │ │ │ └── components
│ │ │ │ └── ItemListViewSelected.tsx
│ │ │ ├── modal
│ │ │ │ ├── DialogComponent.tsx
│ │ │ │ ├── ModalComponent.tsx
│ │ │ │ ├── useLoading.tsx
│ │ │ │ └── useModal.tsx
│ │ │ └── picker
│ │ │ ├── StyledModalPicker.tsx
│ │ │ └── StyledPicker.tsx
│ │ └── common
│ │ └── StyledHeader.tsx
│ ├── feature
│ │ ├── account
│ │ │ └── AccountView.tsx
│ │ ├── authentication
│ │ │ ├── ChangePassword.tsx
│ │ │ ├── ForgotPwdScreen.tsx
│ │ │ ├── LoginScreen.tsx
│ │ │ ├── RegisterScreen.tsx
│ │ │ ├── SendOtp.tsx
│ │ │ └── components
│ │ │ └── Logo.tsx
│ │ ├── chat
│ │ │ └── ChatScreen.tsx
│ │ ├── home
│ │ │ ├── HomeDataScreen.tsx
│ │ │ ├── HomeDetailScreen.tsx
│ │ │ ├── HomeScreen.tsx
│ │ │ ├── HomeUserListScreen.tsx
│ │ │ └── components
│ │ │ ├── HomeTabs.tsx
│ │ │ ├── ModalContent.tsx
│ │ │ ├── ModalContent2.tsx
│ │ │ └── UserCard.tsx
│ │ ├── notification
│ │ │ ├── NotificationScreen.tsx
│ │ │ └── components
│ │ │ └── HomeTabs.tsx
│ │ └── setting
│ │ ├── SettingScreen.tsx
│ │ └── components
│ │ └── HomeTabs.tsx
│ ├── hooks
│ │ ├── useApi.ts
│ │ ├── useInput.ts
│ │ ├── usePaging.ts
│ │ └── usePagingTakeAfter.ts
│ ├── navigation
│ │ ├── NavigationService.ts
│ │ ├── components
│ │ │ └── StyledTabBar.tsx
│ │ ├── config
│ │ │ ├── options.ts
│ │ │ ├── routes.ts
│ │ │ └── transition.ts
│ │ └── scene
│ │ ├── AuthScenes.tsx
│ │ ├── RootScenes.tsx
│ │ └── TabScenes.tsx
│ └── utilities
│ ├── CommonInterface.ts
│ ├── SocketProvider.tsx
│ ├── authenticate
│ │ ├── AuthenticateService.ts
│ │ └── TokenProvider.ts
│ ├── context
│ │ └── APIProvider.tsx
│ ├── format.ts
│ ├── helper.ts
│ ├── i18next.ts
│ ├── logger.ts
│ ├── notification
│ │ └── index.ts
│ ├── permissions
│ │ └── index.ts
│ ├── staticData.ts
│ ├── types
│ │ └── typing.d.ts
│ ├── upload
│ │ ├── ImagePicker.tsx
│ │ └── ImageUploader.ts
│ ├── validate.ts
│ └── yupValidate.ts
├── tsconfig.json
└── yarn.lock
49 directories, 124 files