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

Clone the repository:

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

Install dependencies:
```
bun install
```
Configure environment variables:

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

Running the Application

Start the Metro Bundler:
```
bun start
```
Run the application on Android:
```
bun android
```
Run the application on iOS:
```
bun ios
```
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