react-native

When this skill is activated, always start your first response with the 🧢 emoji.

React Native

A comprehensive mobile development skill covering the full React Native ecosystem - from bootstrapping an Expo project to shipping production apps on iOS and Android. It encodes deep expertise in Expo (managed and bare workflows), React Navigation and Expo Router, native module integration, Hermes-powered performance optimization, and over-the-air update strategies. Whether you are building a greenfield app or maintaining a complex production codebase, this skill provides actionable patterns grounded in real-world mobile engineering.

When to use this skill

Trigger this skill when the user:

• Wants to create, configure, or scaffold a React Native or Expo project
• Needs help with React Navigation or Expo Router (stacks, tabs, deep linking)
• Is writing or debugging a native module or Turbo Module bridge
• Asks about mobile performance (Hermes, FlatList optimization, re-render prevention)
• Wants to set up OTA updates with EAS Update or CodePush
• Needs guidance on Expo config plugins or prebuild customization
• Is deploying to the App Store or Google Play (EAS Build, Fastlane, signing)
• Asks about push notifications, background tasks, or device APIs in React Native

Do NOT trigger this skill for:

• Web-only React development with no mobile component
• Flutter, Swift-only, or Kotlin-only native app development

Setup & authentication

Environment variables

EXPO_TOKEN=your-expo-access-token
# Optional: for EAS Build and Update
EAS_BUILD_PROFILE=production

Installation

# Create a new Expo project (recommended starting point)
npx create-expo-app@latest my-app
cd my-app

# Or add Expo to an existing React Native project
npx install-expo-modules@latest

# Install EAS CLI for builds and updates
npm install -g eas-cli
eas login

Basic initialisation

// app/_layout.tsx (Expo Router - file-based routing)
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="details" options={{ title: 'Details' }} />
    </Stack>
  );
}

// app.json / app.config.ts (Expo configuration)
import { ExpoConfig } from 'expo/config';

const config: ExpoConfig = {
  name: 'MyApp',
  slug: 'my-app',
  version: '1.0.0',
  orientation: 'portrait',
  icon: './assets/icon.png',
  splash: { image: './assets/splash.png', resizeMode: 'contain' },
  ios: { bundleIdentifier: 'com.example.myapp', supportsTablet: true },
  android: { package: 'com.example.myapp', adaptiveIcon: { foregroundImage: './assets/adaptive-icon.png' } },
  plugins: [],
};

export default config;

Core concepts

React Native renders native platform views (UIView on iOS, Android View on Android) driven by JavaScript business logic. The architecture has evolved through three eras:

The Bridge (Legacy): JS and native communicate via an asynchronous JSON bridge. All data is serialized/deserialized. This is the bottleneck behind most performance complaints in older RN apps.

The New Architecture (Fabric + TurboModules): Released as default in RN 0.76+. Fabric replaces the old renderer with synchronous, concurrent-capable rendering. TurboModules replace the bridge with JSI (JavaScript Interface) - direct C++ bindings for native module calls with no serialization overhead. Codegen generates type-safe interfaces from TypeScript specs.

Expo as the Platform Layer: Expo provides a managed layer on top of React Native - prebuild (generates native projects from config), EAS (cloud build and OTA update services), Expo Modules API (write native modules in Swift/Kotlin with a unified API), and Expo Router (file-based navigation). The vast majority of new RN projects should start with Expo. "Bare workflow" is only needed when Expo's managed layer cannot accommodate a specific native requirement.

Navigation Model: React Navigation (imperative) and Expo Router (file-based, built on React Navigation) are the standard. Navigation state lives in a stack machine - screens push/pop onto stacks, tabs switch between stack navigators, and drawers wrap stacks. Deep linking maps URLs to screen paths.

Common tasks

1. Set up navigation with Expo Router

File-based routing where the file system defines the navigation structure.

// app/_layout.tsx - Root layout with tabs
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function Layout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#007AFF' }}>
      <Tabs.Screen
        name="index"
        options={{ title: 'Home', tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} /> }}
      />
      <Tabs.Screen
        name="profile"
        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} /> }}
      />
    </Tabs>
  );
}

// app/details/[id].tsx - Dynamic route with params
import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';

export default function Details() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <View><Text>Detail ID: {id}</Text></View>;
}

Deep linking works automatically with Expo Router - the file path IS the URL scheme.

2. Optimize FlatList performance

FlatList is the primary scrolling container. Misconfigured lists are the number one source of jank.

import { FlatList } from 'react-native';
import { useCallback, memo } from 'react';

const MemoizedItem = memo(({ title }: { title: string }) => (
  <View style={styles.item}><Text>{title}</Text></View>
));

export default function OptimizedList({ data }: { data: Item[] }) {
  const renderItem = useCallback(({ item }: { item: Item }) => (
    <MemoizedItem title={item.title} />
  ), []);

  const keyExtractor = useCallback((item: Item) => item.id, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}
      windowSize={5}
      maxToRenderPerBatch={10}
      removeClippedSubviews={true}
      initialNumToRender={10}
    />
  );
}

Always provide getItemLayout for fixed-height items. It eliminates async layout measurement and enables instant scroll-to-index.

3. Create a native module with Expo Modules API

Write native functionality in Swift/Kotlin with a unified TypeScript interface.

npx create-expo-module my-native-module --local

// modules/my-native-module/ios/MyNativeModule.swift
import ExpoModulesCore

public class MyNativeModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyNativeModule")

    Function("getDeviceName") {
      return UIDevice.current.name
    }

    AsyncFunction("fetchData") { (url: String, promise: Promise) in
      // async native work
      promise.resolve(["status": "ok"])
    }
  }
}

// modules/my-native-module/index.ts
import MyNativeModule from './src/MyNativeModuleModule';

export function getDeviceName(): string {
  return MyNativeModule.getDeviceName();
}

Prefer Expo Modules API over bare TurboModules for new code - it handles iOS/Android symmetry and codegen automatically.

4. Configure OTA updates with EAS Update

Push JS bundle updates without going through app store review.

# Install and configure
npx expo install expo-updates
eas update:configure

# Publish an update to the preview channel
eas update --branch preview --message "Fix checkout bug"

# Publish to production
eas update --branch production --message "v1.2.1 hotfix"

// app.config.ts - updates configuration
{
  updates: {
    url: 'https://u.expo.dev/your-project-id',
    fallbackT