ilyasbo / 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.

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 yup for validation
• 🎯 Localization with i18next + validation using Eslint.

🎤 Philosophy

• 🚀 Production-ready
• 🥷 Developer experience + Productivity
• 🧩 Minimal code and dependencies
• ⚠️ well maintained third-party libraries

🔗 Requirements

• Node.js LTS release
• Git
• Watchman, required only for macOS or Linux users
• Yarn
• Expo Cli
• VS Code Editor

🤖 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.