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.

ilyasbo/react-native-template-obytes