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}> {item.name} ${item.price} )} ItemSeparatorComponent={() => } /> ); }

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)

```tsx
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)

react-native

React Native

Core Components