Expo Integration

Expo handles the native complexity so you can focus on JavaScript.

1. Expo Router

We use file-based routing (app/index.tsx).

2. Essential Libraries

expo-image: Optimized images.
expo-font: Custom fonts.
expo-safe-area-context: Handling notches.

3. Persistent Data

`AsyncStorage` (DEPRECATED for secrets)

Used for simple, non-sensitive data like "hasSeenOnboarding".

`SecureStore`

Used for sensitive data like Auth Tokens. It encrypts data on the device.

npx expo install expo-secure-store

Javascript

import * as SecureStore from 'expo-secure-store';

async function save(key, value) {
  await SecureStore.setItemAsync(key, value);
}

async function getValueFor(key) {
  let result = await SecureStore.getItemAsync(key);
  if (result) {
    alert("Here's your value \u2753 " + result);
  } else {
    alert('No values stored under that key.');
  }
}

4. Device Features

Notifications

Send push notifications.

Javascript

import * as Notifications from 'expo-notifications';

Sensors (Gyroscope, Accelerometer)

Access device hardware.

Javascript

import { Gyroscope } from 'expo-sensors';

Haptics

Give physical feedback to users.

Javascript

import * as Haptics from 'expo-haptics';

const onPress = () => {
  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
};

5. EAS Workflow

Mermaid

graph LR
    Code[Write Code] -->|eas build| Cloud[EAS Build Cloud]
    Cloud -->|eas submit| Store[App Store / Play Store]
    
    Code -->|eas update| Update[OTA Server]
    Update -->|Over the Air| User[User Device]

eas build: Cloud builds.
eas submit: App Store submission.
eas update: OTA updates.

Summary Checklist

Understand app directory.
Use SecureStore for tokens.
Add Haptic feedback to buttons.
Setup EAS.

Expo Integration

On this page