Axpo Documentation

Overview

Axpo is a marketplace-ready React Native / Expo template for car rental, ride-share, or automotive booking apps. All UI screens are included — connect your own backend when ready.

Features

Everything included in the template out of the box.

Requirements

Software you need before installing the project.

Required

For testing on devices

Optional

• EAS CLI — npm install -g eas-cli for cloud builds
• Watchman (macOS) — faster file watching for React Native
• Git — version control

Installation

Follow these steps to set up the project on your machine.

npm install

npm start
# or
npx expo start

Running the App

Once Expo is running, choose how to preview the app.

Expo terminal shortcuts

Direct platform commands

npm run ios       # expo start --ios
npm run android   # expo start --android
npm run web       # expo start --web

Clear Metro cache

Use after dependency changes, splash updates, or if stale code appears:

npx expo start -c

After native config changes

If you modify app.json splash settings or native plugins:

npx expo prebuild --clean
npx expo start -c

Folder Structure

Key directories and what they contain.

Path alias

Imports use @/ mapped to the project root (see tsconfig.json):

import { useTranslation } from '@/context/language-context';
import { VEHICLES } from '@/constants/vehicles';

Navigation Architecture

How screens are organized in the Expo Router stack.

Custom tab bar: components/navigation/custom-tab-bar.jsx — wired in app/(tabs)/_layout.jsx.

Tech Stack

Libraries and frameworks used in this template.

npm Scripts

Color Palette

Axpo uses a purple & white light theme. Change colors in the style files listed at the bottom.

Primary

Backgrounds

Text

Semantic

Where colors are defined

Typography & Fonts

The template uses system fonts — no custom font files are bundled.

Font weights used

Adding custom fonts

import { useFonts } from 'expo-font';

const [loaded] = useFonts({
  'MyFont-Regular': require('../assets/fonts/MyFont-Regular.ttf'),
  'MyFont-Bold': require('../assets/fonts/MyFont-Bold.ttf'),
});

title: {
  fontFamily: 'MyFont-Bold',
  fontSize: 24,
}

Icons

Icons use Ionicons from @expo/vector-icons.

import { Ionicons } from '@expo/vector-icons';

<Ionicons name="search" size={20} color="#6C3CE1" />

Browse all icon names: icons.expo.fyi

Logo & Branding

How to change the app name, logo, splash screen, and icons.

"plugins": [[
  "expo-splash-screen",
  {
    "backgroundColor": "#6C3CE1",
    "image": "./assets/images/splash-icon.png",
    "imageWidth": 100,
    "dark": { "backgroundColor": "#2D1580" }
  }
]]

Languages (i18n)

5 languages built in. User selection is saved to AsyncStorage (@axpo/locale).

Using translations in code

import { useTranslation } from '@/context/language-context';

const { t, locale, setLanguage, dateLocale } = useTranslation();

<Text>{t('home.greeting')}</Text>
<Text>{t('booking.totalPrice', { amount: '299' })}</Text>

Users change language via Profile → Settings → Language (app/profile/language.jsx).

Adding a new language

Translation files location

i18n/translations/en.json, fr.json, es.json, de.json, ko.json — ~271 keys each.

Mock Data & Customization

Vehicles

Edit constants/vehicles.js — the VEHICLES array and helper functions (getVehicleById, getFeaturedVehicle, etc.).

Booking pricing

Edit constants/booking.js for tax rates, service fees, add-ons, and i18n-aware location/duration helpers.

Connecting a backend

The template is UI-first. To connect a real API:

1. Create a services/ or api/ folder for fetch logic
2. Replace constants/vehicles.js reads with API responses
3. Wire auth screens to Firebase, Supabase, or your REST API

Production Build

EAS Build (recommended)

npm install -g eas-cli
eas login
eas build:configure
eas build --platform ios
eas build --platform android

Docs: expo.dev/build

Local prebuild

npx expo prebuild
npx expo run:ios
npx expo run:android

Troubleshooting