This project was development by Amela Technology
Below you'll find information about performing common tasks.
...
- Easy to start
- React native version 0.63.4
- Fully using typescript for typing
- Folder structs using package-by-feature (why)
- Redux-toolkit, 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)
-
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 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
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
and rebuild project
- 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
Runs the jest test runner on your tests.
Like npm start
, but also attempts to open your app in the iOS Simulator if you're on a Mac and have 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.
Run linter check source code
Run linter fix source code
Link assets and font from src/assets to Native 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
│ │ │ ├── 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
│ │ │ └── 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, 122 files