The Complete Production SOP: How to Deploy and Run Expo & React Native Mobile Artisan in Autonomous AI Agents

---
name: "cursor-react-native"
description: "Build fluid iOS and Android mobile apps with Expo Router v3, NativeWind, and Reanimated."
category: "fullstack"
---

# Rules
1. Always wrap screen containers with SafeAreaView or useSafeAreaInsets.
2. Ensure animations leverage react-native-reanimated and run on the UI thread.
3. Verify Expo Router file-based route syntax under app/ directory.
4. Check packages before installing to avoid incompatible native binary modules.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
      'nativewind/babel',
    ],
    plugins: [
      'react-native-reanimated/plugin',
    ],
  };
};

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Animated, { FadeInDown } from 'react-native-reanimated';

export default function ProfileModal() {
  const insets = useSafeAreaInsets();
  const router = useRouter();

  return (
    <View 
      className="flex-1 bg-neutral-900 px-6"
      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
    >
      <Animated.View entering={FadeInDown.duration(300)} className="mt-8">
        <Text className="text-2xl font-bold text-white">Profile Settings</Text>
        <Text className="text-neutral-400 mt-2">Manage mobile preferences and sync.</Text>
        <Pressable 
          onPress={() => router.back()}
          className="mt-6 bg-blue-600 active:bg-blue-700 py-3 rounded-xl items-center"
        >
          <Text className="text-white font-semibold">Done</Text>
        </Pressable>
      </Animated.View>
    </View>
  );
}

{
  "scripts": {
    "verify": "tsc --noEmit && expo-doctor",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}