React Native

Core Components

import { View, Text, ScrollView, FlatList, Pressable, StyleSheet } from 'react-native';

function ProductList({ products }: { products: Product[] }) { return ( <FlatList data={products} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <Pressable onPress={() => navigate('Detail', { id: item.id })} style={styles.card}> <Text style={styles.title}>{item.name}</Text> <Text style={styles.price}>${item.price}</Text> </Pressable> )} ItemSeparatorComponent={() => <View style={styles.separator} />} /> ); }

const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff' }, title: { fontSize: 16, fontWeight: '600' }, price: { fontSize: 14, color: '#666', marginTop: 4 }, separator: { height: 1, backgroundColor: '#eee' }, });

Navigation (React Navigation)

import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

type RootStackParamList = { Home: undefined; Detail: { id: string }; };

const Stack = createNativeStackNavigator<RootStackParamList>(); const Tab = createBottomTabNavigator();

function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Detail" component={DetailScreen} /> </Stack.Navigator> </NavigationContainer> ); }

// Type-safe navigation import { NativeStackScreenProps } from '@react-navigation/native-stack'; type DetailProps = NativeStackScreenProps<RootStackParamList, 'Detail'>;

function DetailScreen({ route, navigation }: DetailProps) { const { id } = route.params; return <Text>{id}</Text>; }

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({ shadow: Platform.select({ ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 }, android: { elevation: 3 }, }), });

// File-based: Component.ios.tsx / Component.android.tsx (auto-resolved)

Networking

import { useQuery, useMutation } from '@tanstack/react-query';

function useProducts() { return useQuery({ queryKey: ['products'], queryFn: async () => { const res = await fetch(${API_URL}/products); if (!res.ok) throw new Error('Failed to fetch'); return res.json() as Promise<Product[]>; }, }); }

Secure Storage

import EncryptedStorage from 'react-native-encrypted-storage';

await EncryptedStorage.setItem('auth_token', token); const token = await EncryptedStorage.getItem('auth_token'); await EncryptedStorage.removeItem('auth_token');

Performance

Technique Impact

FlatList over ScrollView for lists High

React.memo on list items Medium

useCallback for event handlers in lists Medium

Hermes engine (default in RN 0.70+) High

Avoid inline styles in render Low-Medium

InteractionManager.runAfterInteractions

Medium

Anti-Patterns

Anti-Pattern Fix

ScrollView for long lists Use FlatList or FlashList

Inline functions in FlatList renderItem Extract component, use React.memo

Storing tokens in AsyncStorage Use react-native-encrypted-storage

No error boundaries Wrap screens in error boundaries

Ignoring keyboard on forms Use KeyboardAvoidingView

Production Checklist

• Hermes engine enabled

• ProGuard/R8 for Android release builds

• App signing configured (Android keystore, iOS certificates)

• Deep linking configured

• Error tracking (Sentry, Bugsnag)

• OTA updates (CodePush or Expo Updates)

• Performance monitoring (Flipper, React DevTools)