Expo Starter Kit

This repository is a practical starter for building React Native apps with Expo. It is meant to be cloned, read quickly, and used as the base for common interview or freelance tasks.

Create a fresh project

Use the starter command:

npx --yes create-expo-interview-starter MyApp
cd MyApp

This command works when the package is published to npm. It creates the fresh Expo app from the starter package directly, so you do not need GitHub, a zip file, or copy-paste during the round.

Publish once

1. Log in to npm with npm login.
2. Make sure the package name is available.
3. Run npm publish.
4. On another machine, use npx --yes create-expo-interview-starter MyApp.

Recommended folder structure

src/
  App.tsx
  components/
    ui/
      AppButton.tsx
      AppCard.tsx
      AppText.tsx
      Screen.tsx
  config/
    env.ts
  localization/
    i18n.ts
    translation/
      en.ts
      gu.ts
  navigation/
    index.tsx
  screens/
    app-screens/
      Home/
        index.tsx
  theme/
    ThemeProvider.tsx
    theme.ts

What this starter includes

• Expo entry setup with expo/AppEntry
• expo-font loading for bundled fonts
• Theme provider with light and dark palettes
• Translation setup with English and Gujarati
• Small reusable UI kit for button, card, text, and screen wrappers
• Environment helper for EXPO_PUBLIC_ variables
• One default home screen that shows the patterns in one place

What to keep in every practical project

1. Start with one screen and one flow.
2. Keep state local unless the task truly needs shared state.
3. Add loading, empty, and error states early.
4. Use small reusable components only when something repeats.
5. Keep the UI polished and simple before you add extra libraries.

Essential configs

• app.json for app name, slug, bundle IDs, and Expo settings
• babel.config.js for babel-preset-expo
• metro.config.js for Expo Metro config
• .env.example with EXPO_PUBLIC_ variables
• .gitignore updated for .env, .expo, .expo-shared, and web-build

Main UI building blocks

• AppText for consistent typography
• AppButton for primary actions
• AppCard for cards and sections
• Screen for safe area, scroll, and background handling

Theme setup

• ThemeProvider manages dark and light modes
• theme.ts stores shared spacing, radius, typography, and colors
• useAppTheme() exposes the active theme and a toggleTheme() action

Language setup

• i18n.ts initializes i18next
• The app detects the device language first
• Language choice is cached in AsyncStorage
• Translation files live in src/localization/translation

Environment setup

Copy the example file:

cp .env.example .env

Use client-safe variables with EXPO_PUBLIC_:

EXPO_PUBLIC_API_BASE_URL=https://api.example.com
EXPO_PUBLIC_APP_ENV=development

Read them through src/config/env.ts.

Useful scripts

• yarn start to launch Expo
• yarn start:clear to clear the Metro cache
• yarn android to run a dev build on Android
• yarn ios to run a dev build on iOS
• yarn web to open the web build
• yarn prebuild to generate native folders when needed
• yarn doctor to verify the Expo environment
• yarn lint to check code style
• yarn typecheck to verify TypeScript
• yarn android:clean to clean Android builds
• yarn ios:pods to install iOS pods after prebuild

How to start writing a feature

1. Read the requirement and identify the main screen.
2. Sketch the flow with static data first.
3. Add local state and handlers.
4. Connect API or storage only after the UI works.
5. Add loading, empty, and error states.
6. Refine spacing, typography, and edge cases.

Notes

• This starter uses Expo prebuild and dev builds, so it works like a modern native app workflow.
• It intentionally leaves out react-native-reanimated from the base install to avoid dependency conflicts; add it only when a task truly needs advanced animations or drawer-style gestures.
• When adding new Expo-compatible packages, prefer npx expo install package-name.
• If you want the Expo default app-router style instead of React Navigation, you can swap the navigation layer later without changing the theme, translation, or component structure.