π± 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
- π VSCode recommended extensions configuration
- βοΈ 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.