React Native Template Obytes
โญ Features
โ 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
๐ค Philosophy
๐ Production-ready๐งฉ Minimal codeโ ๏ธ well maintained third-party libraries
๐ Requirements
๐ค Getting started
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",
},
๐งฉ Customization
๐ฒ Update App Icon & Splash screen
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
โ๏ธ Custom fonts
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
๐ Read More About Modules
Releasing and building the app with Github action
๐ License
This project is MIT licensed.