React Native Starter Template ·

This Template is a React Native template leveraging on expo and Expo File-Based Routing. It is designed to accelerate development by providing essential features such as state management, internationalization, data fetching, navigation with Expo-router, Authentication, and reusable components. To learn more about expo, check their official documentation here.

NOTE: This project uses Bun as the package manager, Biomejs for code linting and formatting, and Total-typescript Reset for improved typescript's built-in typings.

Features

• 🌍 Internationalization (i18n)

  • Multi-language support using react-i18next for seamless localization.

• 🗃️ State Management with Redux and Context API

  • Centralized state management for efficient global state access and updates.

• 🔍 Data Fetching with React Query

  • Optimized data fetching, caching, and synchronization.

• 🧭 Navigation

  • Smooth and intuitive navigation using expo-router with Link and hooks like useRouter(), useNavigation(), useGlobalSearchParams(), useLocalSearchParams(), etc.

• ⚛️ Component-Based Architecture

  • Modular design with reusable UI components and native StyleSheet object.

• 📦 Common Utilities

  • Helper functions and utilities for streamlined development.

• 🔗 Axios Management

  • Configurable API requests using Axios with built-in error handling and response management.

• 🍪 Cookie Management

  • Simplified management of cookies and expo-secure-store for authentication and user sessions.

• 🔒 Authentication

  • User authentication and registration with secure token management.

Folder Structure

• src/ - source folder for all other directories
• app/ - special directory. Any file you add to this directory becomes a route inside the native app and reflects the same URL for that route on the web
• assets/ - directory for images and fonts
• components/ - primary and secondary resuable components and tests directory
• config/ - initialization of environment variables and other configuration
• constants/ - colors palette, window with and height, etc
• contexts/ - context API for session, user, theme, etc
• hooks - custom hooks, theme hooks, etc
• lib/ - abstractions on third party libraries
• providers/ - third party library providers such as Redux, React-query, etc
• queries/ - react-query query and mutation hooks to make server requests
• scripts/ - to reset project, native scripts, etc
• services/ - axios or ky configuration, REST API methods and routes, etc
• store/ - redux and redux-toolkit state, slices, and actions
• types/ - typescript type declarations
• utils/ - utility and helper functions

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or higher)
• Yarn
• Android Studio / Xcode for Android/iOS development
• Bun

Installation

1. Clone the repository:

   git clone https://github.com/John-pels/react-native-starter-template.git
   cd react-native-starter-template

2. Install dependencies:

   bun install

3. Configure environment variables:

   Change .env.example to .env file in the root directory and update with your configuration settings:

Running the Application

1. Start the Metro Bundler:

   bun start

2. Run the application on Android:

   bun android

3. Run the application on iOS:

   bun ios

4. Access the application:

   The app will be available on your emulator or device.

🧪 Testing

To run the tests, use the following command:

bun test

🛠️ Scripts

• 🧹 Format and Lint code: bun check
• 🏃‍♂️ Start the application: bun start
• 👨‍💻 Start in development mode: bun android or bun ios or bun web
• 🔍 Lint the code using ESLint: yarn lint
• 🧪 Run the tests: bun test
• 🚀 update packages: bun update-packages
• ️‍🔥 Find unused files, dependencies and exports: bun knip

🛠️ Expo Application Services (EAS) Scripts

• 🧹 Runs the Android app in Release mode on a connected device or emulator: bun android:release
• 🧹 Create a development build for Android, using the configuration specified in the development profile: bun android:dev-build
• 🧹 Performs a local development build for Android using EAS Build, again using the development profile: bun android:dev-build:local
• 🧹 Builds an Android app using the preview profile on EAS Build: bun android:preview
• 🧹 Builds and runs the iOS app in Release mode on a connected device or simulator: bun ios:release
• 🧹Creates an iOS build using EAS Build, specifically targeting the iOS simulator: bun ios:dev-build
• 🧹 Performs a local development build for iOS using EAS Build, using the development profile: bun ios:dev-build:local
• 🧹 Builds an iOS app using the preview profile on EAS Build: bun ios:preview

📜 License

MIT License

👤 Author

John O. Emmanuel

---

Feel free to contribute to this template by submitting issues or pull requests.

For any questions or support, please contact John O. Emmanuel.