React Native Cheat Sheet

Updated 2026-04-29

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. 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

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.

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.