React Native Cheat Sheet

Updated 2026-04-29

🧠Study flashcards on this topic187 cards · spaced repetition→

React Native is Meta's open-source framework for building cross-platform mobile applications using JavaScript and React, enabling a single codebase to compile to native iOS and Android apps. Since React Native 0.76, the New Architecture (JSI, Fabric, TurboModules) ships as the default, eliminating the legacy async bridge in favor of synchronous JavaScript-to-native calls, concurrent rendering, and native-quality animations via Reanimated worklets. React Native 0.78 added React 19 support — including Actions, useActionState, useOptimistic, and ref-as-props — while 0.79 brought Metro deferred hashing, stable package exports resolution, and faster Android startup via uncompressed JS bundles. Understanding React Native's component system, navigation patterns, Flexbox layout, platform APIs, and performance techniques is essential for shipping production-ready apps that feel truly native while maintaining JavaScript development speed.

What This Cheat Sheet Covers

This topic spans 18 focused tables and 209 indexed concepts, 187 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core ComponentsTable 2: Styling and LayoutTable 3: React Hooks for State and EffectsTable 4: Navigation PatternsTable 5: Platform-Specific CodeTable 6: Animations and GesturesTable 7: State ManagementTable 8: Networking and API CallsTable 9: Performance OptimizationTable 10: New Architecture and React 19Table 11: Testing StrategiesTable 12: Debugging and Developer ToolsTable 13: Third-Party LibrariesTable 14: Deployment and DistributionTable 15: Expo WorkflowTable 16: Accessibility FeaturesTable 17: Error Handling and DebuggingTable 18: Security and Secure Storage

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Core Components

These are the building blocks you reach for on almost every screen — the primitives React Native maps straight onto native iOS and Android views. The most important distinction to internalize early is FlatList/SectionList (virtualized, render only what's visible) versus ScrollView (renders everything at once): get that choice right and long lists stay smooth, get it wrong and they stutter. Pressable is the modern touch primitive that supersedes the older Touchable* family for new code.

Component	Example	Description
View	`<View style={{flex: 1}}>` `<Text>Hello</Text>` `</View>`	• Fundamental container that maps directly to a native view on each platform • supports Flexbox, styling, touch handling, and accessibility.
Text	`<Text style={{color: 'blue'}}>` `Welcome` `</Text>`	• Displays text with nested style inheritance • supports press events, `numberOfLines` truncation, and accessibility labels.
TextInput	`<TextInput` `placeholder="Email"` `onChangeText={setText}` `/>`	• Captures user text with controlled or uncontrolled behavior • supports keyboard types, autocorrect, secure entry, and multiline.
Pressable	`<Pressable` `onPress={...}` `style={({pressed}) => [...]}` `>`	• Modern touchable with press-state feedback via callback style • preferred over TouchableOpacity for new code; supports long press and accessibility.
FlatList	`<FlatList` `data={items}` `keyExtractor={i => i.id}` `renderItem={({item}) => <View />}` `/>`	• High-performance virtualized list that only renders visible items • supports pull-to-refresh, infinite scroll, and horizontal mode.
ScrollView	`<ScrollView>` `{data.map(item => <View />)}` `</ScrollView>`	• Scrollable container that renders all children immediately • use for small, bounded lists where virtualization is not needed.
SectionList	`<SectionList` `sections={[{title:'A', data:[...]}]}` `renderItem={...}` `/>`	• Virtualized list with section headers • ideal for grouped data such as alphabetical contacts or categorized content.
Image	`<Image` `source={{uri: 'https://...'}}` `style={{width: 50, height: 50}}` `/>`	• Renders images from network, local files, or static resources • supports `resizeMode`, loading indicators, and caching.
Modal	`<Modal visible={show}>` `<View>...</View>` `</Modal>`	• Displays content above the rest of the app • supports `fullScreen`, `pageSheet` presentation styles and animation types.
Button	`<Button` `title="Submit"` `onPress={handlePress}` `/>`	• Platform-styled button with limited customization • use Pressable for custom designs.
SafeAreaView	`<SafeAreaView style={{flex: 1}}>` `<View>...</View>` `</SafeAreaView>`	• Adds padding to avoid notches and system UI on iOS • does not work on Android — use `react-native-safe-area-context` instead.
KeyboardAvoidingView	`<KeyboardAvoidingView` `behavior="padding"` `keyboardVerticalOffset={80}` `>`	• Adjusts view when keyboard appears • behavior options: `padding`, `height`, `position`.
ActivityIndicator	`<ActivityIndicator` `size="large"` `color="#0000ff"` `/>`	• Platform-native loading spinner • uses `UIActivityIndicatorView` on iOS, `ProgressBar` on Android.
StatusBar	`<StatusBar` `barStyle="dark-content"` `backgroundColor="#fff"` `/>`	• Controls device status bar appearance • set bar style, background (Android), and visibility globally or per-screen.
Switch	`<Switch` `value={enabled}` `onValueChange={setEnabled}` `/>`	• Platform-styled toggle • renders as `UISwitch` on iOS and `Switch` on Android with native animations.
RefreshControl	`<ScrollView` `refreshControl={<RefreshControl` `refreshing={loading} onRefresh={fn} />}` `>`	• Adds pull-to-refresh to scrollable components • supports custom colors and tint.
ImageBackground	`<ImageBackground source={bg}>` `<Text>Content</Text>` `</ImageBackground>`	• Renders children on top of a background image • takes same props as `Image` plus `imageStyle` for separate image styling.
TouchableOpacity	`<TouchableOpacity` `onPress={...}` `activeOpacity={0.7}` `>`	• Reduces opacity on press for visual feedback • superseded by Pressable for new code.
VirtualizedList	`<VirtualizedList` `data={data}` `getItem={(d,i) => d[i]}` `getItemCount={d => d.length}` `/>`	• Base virtualized list underlying FlatList and SectionList • use directly when data is not a plain array.

Table 2: Styling and Layout

React Native styling is Flexbox all the way down — but with mobile-friendly defaults, like flexDirection defaulting to column rather than the web's row. Master flex, justifyContent, and alignItems and you can lay out almost any screen; the rest here are the spacing, sizing, and visual-effect props you layer on top. Note the New Architecture (0.76+) additions — boxShadow, filter, mixBlendMode — which finally bring CSS-aligned, cross-platform visual effects in place of the old iOS-vs-Android shadow split.

Property	Example	Description
StyleSheet.create	`const styles = StyleSheet.create({` `box: {width: 100}` `})`	• Creates optimized style objects with validation and performance benefits • styles are sent to native once rather than on every render.

The rest of this section is part of the full cheat sheet

Table 3: React Hooks for State and Effects

Hooks are how function components hold state and run side effects, and React Native uses the same React hooks as the web plus a couple of navigation-specific ones. The everyday workhorses are useState, useEffect, and useRef; the React 19 additions (useActionState, useOptimistic, use) bring async Actions and optimistic UI into the mix. Watch the two at the bottom — useFocusEffect and useIsFocused come from React Navigation, not React itself, and fire on screen focus rather than mount.

Hook	Example	Description
useState	`const [count, setCount] = useState(0)` `setCount(count + 1)`	• Manages local component state • setter triggers re-render when state changes.

The rest of this section is part of the full cheat sheet

Mobile apps live or die by how users move between screens, and React Navigation (or Expo Router on top of it) is the de facto answer. The three navigator types — stack, tabs, and drawer — are the structural skeleton, while the navigation.* methods are the verbs you call to actually move around. Note the distinction between navigate (jumps to an existing screen if one is open) and push (always stacks a fresh copy), plus React Navigation 7's newer static API and screen preloading.

Pattern	Example	Description
Stack Navigator	`<Stack.Navigator>` `<Stack.Screen name="Home" />` `</Stack.Navigator>`	• Card-style navigation with push/pop transitions • maintains history stack for back navigation.

The rest of this section is part of the full cheat sheet

Table 1: Core Components

Component	Example	Description
View	`<View style={{flex: 1}}>` `<Text>Hello</Text>` `</View>`	• Fundamental container that maps directly to a native view on each platform • supports Flexbox, styling, touch handling, and accessibility.
Text	`<Text style={{color: 'blue'}}>` `Welcome` `</Text>`	• Displays text with nested style inheritance • supports press events, `numberOfLines` truncation, and accessibility labels.
TextInput	`<TextInput` `placeholder="Email"` `onChangeText={setText}` `/>`	• Captures user text with controlled or uncontrolled behavior • supports keyboard types, autocorrect, secure entry, and multiline.
Pressable	`<Pressable` `onPress={...}` `style={({pressed}) => [...]}` `>`	• Modern touchable with press-state feedback via callback style • preferred over TouchableOpacity for new code; supports long press and accessibility.
FlatList	`<FlatList` `data={items}` `keyExtractor={i => i.id}` `renderItem={({item}) => <View />}` `/>`	• High-performance virtualized list that only renders visible items • supports pull-to-refresh, infinite scroll, and horizontal mode.
ScrollView	`<ScrollView>` `{data.map(item => <View />)}` `</ScrollView>`	• Scrollable container that renders all children immediately • use for small, bounded lists where virtualization is not needed.
SectionList	`<SectionList` `sections={[{title:'A', data:[...]}]}` `renderItem={...}` `/>`	• Virtualized list with section headers • ideal for grouped data such as alphabetical contacts or categorized content.
Image	`<Image` `source={{uri: 'https://...'}}` `style={{width: 50, height: 50}}` `/>`	• Renders images from network, local files, or static resources • supports `resizeMode`, loading indicators, and caching.
Modal	`<Modal visible={show}>` `<View>...</View>` `</Modal>`	• Displays content above the rest of the app • supports `fullScreen`, `pageSheet` presentation styles and animation types.
Button	`<Button` `title="Submit"` `onPress={handlePress}` `/>`	• Platform-styled button with limited customization • use Pressable for custom designs.
SafeAreaView	`<SafeAreaView style={{flex: 1}}>` `<View>...</View>` `</SafeAreaView>`	• Adds padding to avoid notches and system UI on iOS • does not work on Android — use `react-native-safe-area-context` instead.
KeyboardAvoidingView	`<KeyboardAvoidingView` `behavior="padding"` `keyboardVerticalOffset={80}` `>`	• Adjusts view when keyboard appears • behavior options: `padding`, `height`, `position`.
ActivityIndicator	`<ActivityIndicator` `size="large"` `color="#0000ff"` `/>`	• Platform-native loading spinner • uses `UIActivityIndicatorView` on iOS, `ProgressBar` on Android.
StatusBar	`<StatusBar` `barStyle="dark-content"` `backgroundColor="#fff"` `/>`	• Controls device status bar appearance • set bar style, background (Android), and visibility globally or per-screen.
Switch	`<Switch` `value={enabled}` `onValueChange={setEnabled}` `/>`	• Platform-styled toggle • renders as `UISwitch` on iOS and `Switch` on Android with native animations.
RefreshControl	`<ScrollView` `refreshControl={<RefreshControl` `refreshing={loading} onRefresh={fn} />}` `>`	• Adds pull-to-refresh to scrollable components • supports custom colors and tint.
ImageBackground	`<ImageBackground source={bg}>` `<Text>Content</Text>` `</ImageBackground>`	• Renders children on top of a background image • takes same props as `Image` plus `imageStyle` for separate image styling.
TouchableOpacity	`<TouchableOpacity` `onPress={...}` `activeOpacity={0.7}` `>`	• Reduces opacity on press for visual feedback • superseded by Pressable for new code.
VirtualizedList	`<VirtualizedList` `data={data}` `getItem={(d,i) => d[i]}` `getItemCount={d => d.length}` `/>`	• Base virtualized list underlying FlatList and SectionList • use directly when data is not a plain array.

Table 2: Styling and Layout

Property	Example	Description
StyleSheet.create	`const styles = StyleSheet.create({` `box: {width: 100}` `})`	• Creates optimized style objects with validation and performance benefits • styles are sent to native once rather than on every render.

Table 3: React Hooks for State and Effects

Hook	Example	Description
useState	`const [count, setCount] = useState(0)` `setCount(count + 1)`	• Manages local component state • setter triggers re-render when state changes.

Table 4: Navigation Patterns

Pattern	Example	Description
Stack Navigator	`<Stack.Navigator>` `<Stack.Screen name="Home" />` `</Stack.Navigator>`	• Card-style navigation with push/pop transitions • maintains history stack for back navigation.