๐ฑ A template for your next React Native project ๐, Made with developer experience and performance first: TypeScript, Husky, Lint-Staged, react-navigation, react-query, restyle, react-hook-form, AppIcon, Splash Screen.
๐ Use the template to start your next project or navigate to code source to get some inspiration ๐
- โ Last React Native version
- ๐ Type checking TypeScript
- ๐ Minimal UI kit using @shopify/restyle with theming
- ๐ค Auto generate App Icon using react-native-make and Splash screen using react-native-bootsplash
- ๐ฆ Husky for Git Hooks
- ๐ก Clean project structure with Absolute Imports
- ๐ซ Lint-staged for running linters on Git staged files
- โ๏ธ React Navigation pre-installed with examples
- ๐ซ Auth flow with zustand and react-native-mmkv as a storage to save sensitive data.
- ๐ A simple workflow to build, release and distribute your application using Github action
- ๐ฅ React Query & axios to fetch Data
- ๐งต A good approach with example to handle forms based on react-hook-form and yup for validation
- โ๏ธ Handel environment variables with react-native-env
- ๐ฏ Localization
- ๐ Production-ready
- ๐งฉ Minimal code
โ ๏ธ well maintained third-party libraries
Start your project using obytes template by running:
npx react-native init MyApp --template https://github.com/obytes/react-native-template-obytes
Open the project on your favorite IDE (vscode ๐)
src
โโโ api #axios client and api hooks using react-query
โย ย โโโ APIProvider.tsx
โย ย โโโ client.tsx
โย ย โโโ index.tsx
โย ย โโโ useAddTask.tsx
โย ย โโโ useTasks.tsx
โโโ core # core functionalities:authentication, storage, localization
โย ย โโโ Auth
โย ย โโโ I18n
โย ย โโโ index.tsx
โโโ index.tsx
โโโ navigation # Navigation, stacks and tabs
โย ย โโโ AuthNavigator.tsx
โย ย โโโ RootNavigator.tsx
โย ย โโโ TabNavigator.tsx
โย ย โโโ index.tsx
โย ย โโโ types.tsx
โย ย โโโ utils.tsx
โโโ screens # App screens
โย ย โโโ Home
โย ย โโโ Login
โย ย โโโ Style
โย ย โโโ index.tsx
โโโ translations # translation files
โย ย โโโ en.json
โโโ ui # ui component with theming
โโโ Button.tsx
โโโ ErrorHandler
โโโ Input.tsx
โโโ Pressable.tsx
โโโ SafeAreaView.tsx
โโโ Screen.tsx
โโโ Text.tsx
โโโ View.tsx
โโโ constants.tsx
โโโ icons
โโโ index.tsx
โโโ theme
โโโ utils.tsx
Enable husky Git pre-hooks by adding the following script to your packages.json
and reinstall dependencies to enable husky pre-commit using yarn install
"scripts": {
"postinstall": "husky install",
},
Replace App logo template logo.png
with your logo under assets
folder
Run the following command to generate App icons assets :
yarn react-native set-icon --path ./assets/logo.png --background "#FFF"
For android icon, make sure to provide a logo with more padding and generate a new app icon for android :
yarn react-native set-icon --platform android --path ./assets/android_logo.png --background "#FFF"
To generate a standard splash screen using bootsplash package.
yarn react-native generate-bootsplash assets/logo.png \
--background-color=FFFFFF \
--logo-width=150 \
--assets-path=assets
Replace Inter.ttf
font file with your fonts under assets/fonts
folder
Run the following command to generate App icons assets :
yarn react-native link
More details how to customize App Icon and Splash screen
๐ https://handbook.obytes.com/docs/mobile/get-started
๐ https://handbook.obytes.com/docs/mobile/ci-cd/github-action-build
This project is MIT licensed.