Cheatsheet

// ===== Core components =====
// View                container
// Text                only place actual text lives
// ScrollView           scroll for SHORT lists
// FlatList / SectionList  virtualised long lists
// TextInput            user input
// Image                local + remote images
// Pressable            modern touchable
// Modal                native modal
// SafeAreaView         respects notches
// KeyboardAvoidingView push content up when keyboard opens

// ===== Navigation (react-navigation) =====
// npm i @react-navigation/native @react-navigation/native-stack
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={Home} />
        <Stack.Screen name='Detail' component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// In Home:
// navigation.navigate('Detail', { id: 'o1' })
// In Detail:
// const { id } = route.params

// Tabs
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// ===== State =====
// Local:    useState + useReducer
// Cross-screen: Context + useReducer; OR zustand / jotai
// Server data: @tanstack/react-query (cache, refetch, focus revalidation)
// Persistence: AsyncStorage (non-sensitive) / SecureStore / Keychain

// ===== Styling =====
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  card: { padding: 12, borderRadius: 8, backgroundColor: 'white', elevation: 2 },
  title: { fontWeight: '600', fontSize: 16 },
});
<View style={styles.card}><Text style={styles.title}>...</Text></View>

// Flexbox is the layout system; defaults differ from web (flexDirection='column').

// ===== Lists =====
<FlatList
  data={orders}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Row item={item} />}
  ListEmptyComponent={<Text>No orders</Text>}
  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
/>

// ===== Networking =====
const res = await fetch('/api/orders');
const data = await res.json();

// Or axios. Or react-query for cache + retry.

// ===== Secure storage =====
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('access_token', token);
const t = await SecureStore.getItemAsync('access_token');

// ===== Permissions (Expo) =====
import * as Notifications from 'expo-notifications';
const { status } = await Notifications.requestPermissionsAsync();

// ===== Animations =====
// LayoutAnimation for simple layout changes
// Animated (built-in)
// react-native-reanimated (recommended for advanced animations) + gesture-handler

// ===== Native modules =====
// Plain RN: write a TurboModule (Swift / Kotlin + JS spec)
// Expo: write an Expo Module (much simpler)
// For built-in features, check the Expo SDK first

// ===== Performance =====
// - FlatList over ScrollView for long lists
// - Keys must be STABLE (id, not index)
// - Move animations off the JS thread (Reanimated)
// - Avoid inline arrow functions in heavy renders (or use React.memo + useCallback)
// - Image: use the 'expo-image' package or react-native-fast-image; pre-resize on the server
// - Use Hermes (default in newer RN)

// ===== Debugging =====
// React DevTools (cmd-D / shake -> Open Debugger)
// Flipper (heavier)
// console.log + Metro logs
// react-native log-android / log-ios

// ===== Testing =====
// Jest (unit + snapshot)
// React Native Testing Library (component)
// Maestro (e2e, recommended over Detox)

// ===== Deployment =====
// Expo: EAS Build + EAS Submit
// Bare RN: Xcode + Android Studio OR fastlane
// OTA JS updates: EAS Update / Codepush

// ===== Pitfalls =====
// - Using web-isms (className, % units in style)
// - ScrollView with 1000 items -> stutter; use FlatList
// - Inline objects in styles -> re-render every paint; use StyleSheet.create
// - Forgetting SafeAreaView on iOS -> content under notch
// - Storing tokens in AsyncStorage -> backups + jailbreaks read them

// expo start | run:ios | run:android | install | eas build | eas update