Expo: платформа для React Native разработки

Expo — платформа для разработки React Native приложений с инструментами, упрощающими весь процесс. Expo предоставляет готовые модули для камеры, локации, уведомлений и других функций, избавляя от необходимости писать нативный код.

Установка

npm install -g expo-cli
npx create-expo-app my-app
cd my-app
npm start

Expo SDK

Expo SDK включает готовые модули для доступа к нативным API: камера, локация, уведомления, сенсоры и другие.

npx expo install expo-camera expo-location expo-notifications

Команда expo install автоматически подбирает совместимые версии пакетов для вашей версии Expo SDK.

Камера

import { CameraView, useCameraPermissions } from 'expo-camera';

function App() {
  const [permission, requestPermission] = useCameraPermissions();
  
  if (!permission) return <View />;
  
  return (
    <CameraView style={{ flex: 1 }} />
  );
}

Location

import * as Location from 'expo-location';

async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') return;
  
  const location = await Location.getCurrentPositionAsync({});
  return location.coords;
}

Notifications

import * as Notifications from 'expo-notifications';

await Notifications.scheduleNotificationAsync({
  content: { title: 'Title', body: 'Body' },
  trigger: null,
});

EAS

# Установка
npm install -g eas-cli

# Login
eas login

# Build
eas build -p ios
eas build -p android

EAS Update

# Публикация
eas update --branch production

# Автоматически через CI
eas update --branch production --message "Fix bug"

Expo Go

# Запуск в Expo Go
npx expo start

# Туннель для удалённого доступа
npx expo start --tunnel

Config

// app.json
{
  "expo": {
    "name": "My App",
    "icon": "./assets/icon.png",
    "version": "1.0.0",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.example.app",
      "supportsTablet": true
    },
    "android": {
      "package": "com.example.app",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png"
      }
    }
  }
}

Prebuild

# Генерация нативных проектов
npx expo prebuild --platform ios
npx expo prebuild --platform android

Преимущества Expo

Быстрый старт:

• Не нужно настраивать Xcode/Android Studio
• Мгновенный предпросмотр в Expo Go
• Готовые модули для распространённых задач

EAS Build:

• Сборка в облаке без локальных зависимостей
• Поддержка custom native code
• Автоматическая подпись и публикация в сторы

EAS Update:

• OTA обновления без ревью стора
• Каналы распространения (production, staging)
• Откат к предыдущей версии

Структура проекта

my-app/
├── app/                  # Роутинг (Expo Router)
│   ├── _layout.tsx      # Общий layout
│   ├── index.tsx        # Главная страница
│   └── (tabs)/         # Tab navigation
├── components/          # Переиспользуемые компоненты
├── hooks/              # Custom hooks
├── constants/          # Константы
├── assets/             # Изображения, шрифты
├── app.json           # Конфигурация
└── package.json

Expo Router

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function Layout() {
  return <Stack screenOptions={{ headerShown: false }} />;
}

// app/index.tsx
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View>
      <Text>Home Screen</Text>
      <Link href="/details">Go to Details</Link>
    </View>
  );
}

// app/details/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function Details() {
  const { id } = useLocalSearchParams();
  return <Text>Details {id}</Text>;
}

Работа с API

import { useEffect, useState } from 'react';

function useData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData)
      .finally(() => setLoading(false));
  }, []);

  return { data, loading };
}

Производительность

Оптимизация:

• Ленивая загрузка изображений
• Мемоизация компонентов (React.memo)
• FlatList вместо map для списков
• Отключение неиспользуемых модулей

# Анализ бандла
npx expo export --dump-sourcemap

# Оптимизация изображений
npx expo-optimize

Нативные модули

# Установка нативного модуля
npx expo install react-native-reanimated

# Если модуль не поддерживается
npx expo prebuild
# Затем сборка через EAS
eas build -p ios

CI/CD с EAS

# .github/workflows/build.yml
name: Build
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm install
      - run: eas build -p ios --non-interactive
        env:
          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}

Миграция на bare workflow

# Преобразование в bare
npx expo prebuild

# После этого можно:
# - Редактировать нативный код
# - Использовать любые native модули
# - Собирать через Xcode/Android Studio

Ограничения Expo

• Некоторые native модули требуют prebuild
• Expo Go имеет ограниченный набор API
• Размер приложения может быть больше
• Зависимость от инфраструктуры Expo

Когда использовать Expo

Подходит:

• Быстрый прототип или MVP
• Команда фокусируется на JS/TS
• Не требуются редкие native модули
• Нужны OTA обновления

Не подходит:

• Требуется полный контроль над native кодом
• Критичен минимальный размер приложения
• Специфичные hardware требования