EXPO starter kit

Jumpstart your app development journey with this Expo starter kit. It includes essential tools and configurations to simplify development and ensure compatibility with the latest practices.

Getting Started

• Features
• Create project with template
• Project Structure
• Editor Setup
• Development Setup
• Project Configuration
• Build Configuration

Features

• Typescript: Enhances code quality and developer productivity with TypeScript.
• Expo Router: Simplifies navigation using file-based routing.
• SVG Transformation: Supports seamless integration of SVG assets.
• Absolute Paths: Simplifies module imports using absolute paths.
• Vector Icons: Includes a variety of vector icons for enhanced visual design.
• Fonts: Provides pre-configured fonts to style text elements as an example.
• Responsive Scales: Ensures consistent UI scaling across devices.
• Common Styles: Encapsulates reusable styles for UI components.
• Splash Screen: Customizes the app's launch screen for branding.
• App Icons: Configures app icons for different platforms.
• RTK Query: Facilitates efficient data fetching and state management.
• Redux Persist: Persists reducer data based on whitelisting.
• Sentry Setup: Enables error monitoring and debugging with Sentry.

Create project with template

To use this template, make sure to have the Expo CLI installed and run:

npx create-expo-app [app-name] --template @ichhya/react-native-expo-starter-kit

Project Structure

|- project-root
	|- android
	|- ios
	|- node_modules
	|- src
		|- app
			|- _layout.tsx
			|- index.tsx
			|- (auth)
				|- _layout.tsx
				|- index.tsx
		|- assets
			|- fonts
			|- images
			|- svgs
			|- index.ts
		|- components
			|- atoms
			|- molecules
			|- organisms
		|- config
		|- constants
		|- helpers
		|- hooks
		|- models
		|- redux
			|- slices
		|- screens
		|- services
			|- apis
			|- providers
		|- utils
	|- .editorconfig
	|- .env.example
	|- .env
	|- .eslintrc
	|- .gitignore
	|- .nvmrc
	|- .prettierrc.js
	|- .ruby-version
	|- README.md
	|- app.json
	|- babel.config.js
	|- declarations.d.ts
	|- metro.config.js
	|- package.json
	|- yarn.lock

Editor Setup

Following tools are used to make code look consistent. Please install the mentioned tools below,

• Prettier
• ESLint

Development Setup

Prerequisites

• Node.js
• Yarn
• Ruby
• Android Studio
• XCode

Please make sure that you have follow environment setup steps as described in React Native Environment Setup documentation.

Project Configuration

.env Files

.env files are where we save all the environment variables. They are placed under project root directory. Ensure to update the .env files as per your needed to reflect changes.

|- project-root
  |- .env.example
  |- .env

.env.example

EXPO_PUBLIC_APP_ENV=
EXPO_PUBLIC_API_URL=
GOOGLE_OAUTH_CLIENT_ID_ANDROID=

After setting env variables follow following steps to get up and running with development. Run following commands from project root directory

1. Install dependencies

yarn

2. Link necessary dependencies

Before linking dependencies, ensure the ios directory exists. If the ios directory is missing, please complete the next steps before proceeding to link dependencies.

cd ios && pod install

3. Generating Native Directories

Expo requires native project directories for Android and iOS. To comply with Expo's requirements for native project directories in Android and iOS:

Remove the android.package and ios.bundleIdentifier fields from app.json. Next, delete the existing native directories for Android and iOS. Afterward, you can regenerate these directories with new specified identifiers using one of the following methods:

Expo Prebuild

Running expo prebuild will generate the required project files. After executing this command, developers can proceed with configuring local development build.

npx expo prebuild

Development Build

Alternatively, you can run a development build (expo run:ios) to generate the native directories.

Compiling the App Locally

To build your project locally you can use compile commands from Expo CLI which generates the android and ios directories:

Building the Android Project

npx expo run:android

Building the iOS Project

npx expo run:ios

Build Configuration

While this starter kit doesn't include pre-configured EAS Build setup, you can easily set it up yourself by following these steps:

EAS Build

EAS Build is a powerful tool offered by Expo for optimizing and simplifying the build process of Expo projects. Here’s how you can get started:

• Expo Account: If you don't have one already, sign up for an Expo account at expo.dev/signup.

• Apple Developer Account: Ensure you have an Apple Developer account if you plan to build iOS apps using EAS Build. This is necessary for full iOS build functionality.

• Setup Guide: Explore the comprehensive Expo documentation on EAS Build for detailed setup instructions.

By setting up EAS Build, you'll streamline your app deployment process and leverage advanced features directly from the command line.

Triggering EAS builds from terminal

EAS Build is available to anyone with an Expo account. You can sign up at https://expo.dev/signup. An apple developer account is required for ios builds.

eas login

eas build --platform [android | ios | all]

IOS Internal Distribution

This is a to distribute apps directly to testers, so they can download and install them to physical devices directly from a web browser as soon as the builds are completed. However, we will need to build the app with an ad hoc provisioning profile that explicitly lists the devices on which the application can run. An apple developer account is required during this process.

The first two steps are required only once, and you don't need to re-register your device again for future builds.

1. Register apple device that you'll be using

   eas device:create

2. Setup build credentials and add device in provisioning profile

   eas credentials

3. Run a build with internal build profile (can also be triggered from this workflow)

   eas build --profile preview --platform ios

You can then access the build artifact in expo project dashboard and use QR scan to directly install the application in the registered IOS device. If you're running iOS 16 or above and haven't yet turned on Developer Mode, you will need to enable it before you can run your build.

Android Internal Distribution

Since there is no Android restrictions, the operating system is capable of installing any compatible .apk file. You can generate an apk file with one command:

eas build --profile preview --platform android