git:20251218.8e57ad2 to git:20260113.90b2d6e

---

name: react-native

description: Cross-platform mobile development with React Native and Expo. Use when building iOS/Android apps with JavaScript/TypeScript, implementing native features, or optimizing mobile performance.

---

# React Native Development

Build native iOS and Android apps with React Native and Expo.

## Framework Options

---

## Project Setup

### Expo (Recommended)

```bash

npx create-expo-app@latest my-app

cd my-app

npx expo start

```

### React Native CLI

```bash

npx @react-native-community/cli init MyApp

cd MyApp

npx react-native run-ios # or run-android

```

---

## Core Components

### Basic Structure

```tsx

export default function App() {

return (

<SafeAreaView style={styles.container}>

<ScrollView contentContainerStyle={styles.content}>

<Text style={styles.title}>Hello World</Text>

</ScrollView>

</SafeAreaView>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

content: {

padding: 16,

},

title: {

fontSize: 24,

},

});

```

### Common Components

```tsx

import {

View,

Text,

Image,

TextInput,

TouchableOpacity,

Pressable,

FlatList,

ActivityIndicator,

Modal,

Switch,

} from 'react-native';

// Touchable with feedback

<Pressable

onPress={handlePress}

style={({ pressed }) => [

styles.button,

pressed && styles.buttonPressed,

]}

>

<Text>Press Me</Text>

</Pressable>

// Text Input

<TextInput

value={text}

onChangeText={setText}

placeholder="Enter text"

style={styles.input}

autoCapitalize="none"

keyboardType="email-address"

returnKeyType="done"

onSubmitEditing={handleSubmit}

/>

// Image

<Image

source={{ uri: 'https://example.com/image.jpg' }}

style={{ width: 100, height: 100 }}

resizeMode="cover"

/>

```

---

## Navigation

### React Navigation Setup

```bash

npm install @react-navigation/native @react-navigation/native-stack

npx expo install react-native-screens react-native-safe-area-context

```

### Stack Navigation

```tsx

type RootStackParamList = {

Home: undefined;

Details: { itemId: string };

};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {

return (

<NavigationContainer>

<Stack.Navigator initialRouteName="Home">

<Stack.Screen

name="Home"

component={HomeScreen}

/>

<Stack.Screen

name="Details"

component={DetailsScreen}

options={({ route }) => ({ title: route.params.itemId })}

/>

</Stack.Navigator>

</NavigationContainer>

);

}

// Navigate

// Go back

navigation.goBack();

```

### Tab Navigation

```tsx

const Tab = createBottomTabNavigator();

function TabNavigator() {

return (

<Tab.Navigator

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

return <Ionicons name={iconName} size={size} color={color} />;

},

})}

>

<Tab.Screen name="Home" component={HomeScreen} />

<Tab.Screen name="Settings" component={SettingsScreen} />

</Tab.Navigator>

);

}

```

---

## State Management

### Zustand (Recommended)

```tsx

interface AuthStore {

user: User | null;

token: string | null;

login: (user: User, token: string) => void;

logout: () => void;

}

export const useAuthStore = create<AuthStore>()(

persist(

(set) => ({

user: null,

token: null,

login: (user, token) => set({ user, token }),

logout: () => set({ user: null, token: null }),

}),

{

storage: createJSONStorage(() => AsyncStorage),

);

```

### React Query

```tsx

const queryClient = new QueryClient();

// Wrap app

<QueryClientProvider client={queryClient}>

<App />

// Use in component

function ItemList() {

const { data, isLoading, error, refetch } = useQuery({

queryFn: fetchItems,

});

if (isLoading) return <ActivityIndicator />;

if (error) return <Text>Error: {error.message}</Text>;

return (

<FlatList

data={data}

renderItem={({ item }) => <ItemRow item={item} />}

keyExtractor={(item) => item.id}

onRefresh={refetch}

refreshing={isLoading}

/>

);

}

```

---

## Styling

### StyleSheet

```tsx

const styles = StyleSheet.create({

container: {

flex: 1,

},

row: {

padding: 16,

borderBottomWidth: StyleSheet.hairlineWidth,

},

text: {

fontSize: 16,

},

shadow: {

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.1,

shadowRadius: 4,

elevation: 3, // Android

},

});

```

### NativeWind (Tailwind for RN)

```bash

npm install nativewind tailwindcss

```

```tsx

export function Card() {

return (

<View className="bg-white rounded-lg p-4 shadow-md">

</View>

);

}

```

---

## Native Features

### Camera (Expo)

```tsx

function CameraScreen() {

const [permission, requestPermission] = Camera.useCameraPermissions();

const cameraRef = useRef<Camera>(null);

const takePicture = async () => {

if (cameraRef.current) {

const photo = await cameraRef.current.takePictureAsync();

console.log(photo.uri);

}

};

if (!permission?.granted) {

}

return (

<Camera ref={cameraRef} style={styles.camera} type={CameraType.back}>

<TouchableOpacity onPress={takePicture}>

<Text>Take Photo</Text>

</TouchableOpacity>

</Camera>

);

}

```

### Push Notifications (Expo)

```tsx

Notifications.setNotificationHandler({

handleNotification: async () => ({

shouldShowAlert: true,

shouldPlaySound: true,

shouldSetBadge: false,

}),

});

async function registerForPushNotifications() {

const { status } = await Notifications.requestPermissionsAsync();

const token = await Notifications.getExpoPushTokenAsync();

return token.data;

}

// Listen for notifications

useEffect(() => {

const subscription = Notifications.addNotificationReceivedListener(

(notification) => {

console.log(notification);

);

return () => subscription.remove();

}, []);

```

### Location

```tsx

async function getLocation() {

const { status } = await Location.requestForegroundPermissionsAsync();

const location = await Location.getCurrentPositionAsync({});

return {

latitude: location.coords.latitude,

longitude: location.coords.longitude,

};

}

```

---

## Performance

### FlatList Optimization

```tsx

<FlatList

data={items}

renderItem={renderItem}

keyExtractor={(item) => item.id}

// Performance optimizations

initialNumToRender={10}

maxToRenderPerBatch={10}

windowSize={5}

removeClippedSubviews={true}

getItemLayout={(data, index) => ({

length: ITEM_HEIGHT,

offset: ITEM_HEIGHT * index,

index,

})}

// Memoize render item

const renderItem = useCallback(

({ item }: { item: Item }) => <MemoizedItem item={item} />,

);

const MemoizedItem = memo(({ item }: { item: Item }) => (

<View>

<Text>{item.name}</Text>

</View>

));

```

### Image Optimization

```tsx

<Image

source={{ uri: imageUrl }}

style={{ width: 200, height: 200 }}

contentFit="cover"

placeholder={blurhash}

transition={200}

cachePolicy="memory-disk"

```

---

## Testing

### Jest + React Native Testing Library

```tsx

const onLogin = jest.fn();

const { getByPlaceholderText, getByText } = render(

);

await waitFor(() => {

expect(onLogin).toHaveBeenCalledWith({

});

});

});

});

```

---

## App Store Deployment

### Expo EAS Build

```bash

# Install EAS CLI

npm install -g eas-cli

# Configure

eas build:configure

# Build for iOS

eas build --platform ios

# Build for Android

eas build --platform android

# Submit to stores

eas submit --platform ios

eas submit --platform android

```

### app.json Configuration

```json

{

"expo": {

"name": "My App",

"slug": "my-app",

"version": "1.0.0",

"ios": {

"bundleIdentifier": "com.mycompany.myapp",

"buildNumber": "1"

},

"android": {

"package": "com.mycompany.myapp",

"versionCode": 1

}

}

}

```

---

## Best Practices

### DO:

- Use Expo for faster development

- Implement proper TypeScript types

- Use FlashList for large lists

- Handle keyboard properly

- Test on real devices

### DON'T:

- Inline styles in render

- Skip memoization for lists

- Ignore platform differences

- Block JS thread with heavy computation

- Forget to handle deep linking