/react-native-template-obytes

๐Ÿ“ฑ A template for your next React Native project ๐Ÿš€, Made with developer experience and performance first: Expo,TypeScript,TailwindCSS, Husky, Lint-Staged, react-navigation, react-query, react-hook-form.

Primary LanguageTypeScriptMIT LicenseMIT

React Native Template Obytes

React Native Template Obytes

๐Ÿ“ฑ A template for your next React Native project ๐Ÿš€, Made with developer experience and performance first: Expo,TypeScript,tailwindcss, Husky, Lint-Staged, react-navigation, react-query, react-hook-form, I18n.

๐Ÿš€ Use the template to start your next project or navigate to code source to get some inspiration ๐Ÿ˜‰

โญ Features

  • โœ… Last Expo SDK + Costume Dev client
  • ๐ŸŽ‰ Type checking TypeScript
  • ๐Ÿ’… Minimal UI kit using tailwindcss with theming.
  • โš™๏ธ Support multiple environnement builds [Production, Staging, Development] using Expo configuration.
  • ๐ŸฆŠ Husky for Git Hooks
  • ๐Ÿ’ก Clean project structure with Absolute Imports
  • ๐Ÿšซ Lint-staged for running linters + typescript checking on Git staged files
  • ๐Ÿ—‚ VSCode recommended extensions configuration, settings and snippets for a better developer experience
  • โ˜‚๏ธ 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 zod for validation
  • ๐ŸŽฏ Localization with i18next + validation using Eslint.

๐ŸŽค Philosophy

  • ๐Ÿš€ Production-ready
  • ๐Ÿฅท Developer experience + Productivity
  • ๐Ÿงฉ Minimal code and dependencies
  • โš ๏ธ well maintained third-party libraries

๐Ÿ”— Requirements

๐Ÿค– Getting started

Start your project by running the following command:

npx create-obytes-app MyApp

Run the app

yarn ios

yarn android

Project structure

src
โ”œโ”€โ”€ api
โ”‚   โ”œโ”€โ”€ common
โ”‚   โ”‚   โ”œโ”€โ”€ api-provider.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ client.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”‚   โ””โ”€โ”€ utils.tsx
โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ posts
โ”‚   โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”‚   โ””โ”€โ”€ use-posts.ts
โ”‚   โ””โ”€โ”€ types.ts
โ”œโ”€โ”€ core
โ”‚   โ”œโ”€โ”€ auth
โ”‚   โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”‚   โ””โ”€โ”€ utils.tsx
โ”‚   โ”œโ”€โ”€ i18n
โ”‚   โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”‚   โ”œโ”€โ”€ react-i18next.d.ts
โ”‚   โ”‚   โ”œโ”€โ”€ resources.ts
โ”‚   โ”‚   โ”œโ”€โ”€ types.ts
โ”‚   โ”‚   โ””โ”€โ”€ utils.tsx
โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ””โ”€โ”€ utils.ts
โ”œโ”€โ”€ index.tsx
โ”œโ”€โ”€ navigation
โ”‚   โ”œโ”€โ”€ auth-navigator.tsx
โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ navigation-container.tsx
โ”‚   โ”œโ”€โ”€ root-navigator.tsx
โ”‚   โ”œโ”€โ”€ tab-navigator.tsx
โ”‚   โ”œโ”€โ”€ types.tsx
โ”‚   โ””โ”€โ”€ utils.tsx
โ”œโ”€โ”€ screens
โ”‚   โ”œโ”€โ”€ feed
โ”‚   โ”‚   โ”œโ”€โ”€ card.tsx
โ”‚   โ”‚   โ””โ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ login
โ”‚   โ”‚   โ””โ”€โ”€ index.tsx
โ”‚   โ”œโ”€โ”€ settings
โ”‚   โ””โ”€โ”€ style
โ”œโ”€โ”€ translations
โ”‚   โ”œโ”€โ”€ ar.json
โ”‚   โ””โ”€โ”€ en.json
โ”œโ”€โ”€ types
โ”‚   โ””โ”€โ”€ index.ts
โ””โ”€โ”€ ui
    โ”œโ”€โ”€ core
    โ”‚   โ”œโ”€โ”€ activity-indicator.tsx
    โ”‚   โ”œโ”€โ”€ bottom-sheet
    โ”‚   โ”œโ”€โ”€ button.tsx
    โ”‚   โ”œโ”€โ”€ image.tsx
    โ”‚   โ”œโ”€โ”€ index.tsx
    โ”‚   โ”œโ”€โ”€ input
    โ”‚   โ”œโ”€โ”€ list
    โ”‚   โ”œโ”€โ”€ pressable.tsx
    โ”‚   โ”œโ”€โ”€ scroll-view.tsx
    โ”‚   โ”œโ”€โ”€ select-input
    โ”‚   โ”œโ”€โ”€ text.tsx
    โ”‚   โ”œโ”€โ”€ touchable-opacity.tsx
    โ”‚   โ””โ”€โ”€ view.tsx
    โ”œโ”€โ”€ error-handler
    โ”‚   โ”œโ”€โ”€ error-fallback.tsx
    โ”‚   โ””โ”€โ”€ index.tsx
    โ”œโ”€โ”€ icons
    โ”œโ”€โ”€ index.tsx
    โ”œโ”€โ”€ screen.tsx
    โ”œโ”€โ”€ theme
    โ”‚   โ”œโ”€โ”€ colors.js
    โ”‚   โ”œโ”€โ”€ constants.tsx
    โ”‚   โ””โ”€โ”€ index.ts
    โ””โ”€โ”€ utils.tsx

๐Ÿงฉ Customization

๐Ÿ“ฒ Update App Icon & Splash screen

Replace App icons template with your icons under assets folder

Run the following command to generate App icons assets :

yarn prebuild

yarn ios

๐Ÿ”– License

This project is MIT licensed.