React Native Cheat Sheet
Complete reference guide for React Native with interactive examples and live playground links
Getting Started
Installation
Setting up a React Native project
React Native
# Install React Native CLI
npm install -g react-native-cli
# Create a new project
npx react-native init MyApp
# With TypeScript template
npx react-native init MyApp --template react-native-template-typescript
# Using Expo (easier for beginners)
npm install -g expo-cli
expo init MyApp
Project Structure
Basic structure of a React Native project
React Native
MyApp/
├── android/ # Android-specific code
├── ios/ # iOS-specific code
├── node_modules/ # Dependencies
├── App.js # Main component
├── index.js # Entry point
├── package.json # Project configuration
└── metro.config.js # Metro bundler config
Running the App
Commands to run React Native apps
React Native
# Start Metro bundler
npx react-native start
# Run on Android
npx react-native run-android
# Run on iOS
npx react-native run-ios
# Using Expo
expo start
Core Components
Basic Components
Essential React Native components
React Native
import React from 'react';
import {
View,
Text,
Image,
ScrollView,
TextInput,
Button,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default function App() {
return (
<ScrollView>
<View style={styles.container}>
<Text style={styles.title}>Hello React Native</Text>
<Image
source={require('./assets/logo.png')}
style={styles.image}
/>
<TextInput
style={styles.input}
placeholder="Type here..."
/>
<Button
title="Press me"
onPress={() => alert('Button pressed!')}
/>
<TouchableOpacity
style={styles.button}
onPress={() => alert('Touched!')}
>
<Text style={styles.buttonText}>Touch me</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
alignItems: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
image: {
width: 200,
height: 200,
resizeMode: 'contain',
},
input: {
width: '100%',
height: 40,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
marginVertical: 10,
paddingHorizontal: 10,
},
button: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginTop: 10,
},
buttonText: {
color: 'white',
textAlign: 'center',
},
});
List Components
Working with lists in React Native
React Native
import React from 'react';
import {
FlatList,
SectionList,
View,
Text,
StyleSheet
} from 'react-native';
// FlatList example
function FlatListExample() {
const data = [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
];
return (
<FlatList
data={data}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
);
}
// SectionList example
function SectionListExample() {
const data = [
{
title: 'Main dishes',
data: ['Pizza', 'Burger', 'Pasta'],
},
{
title: 'Sides',
data: ['French Fries', 'Onion Rings', 'Salad'],
},
];
return (
<SectionList
sections={data}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item}</Text>
</View>
)}
renderSectionHeader={({ section }) => (
<View style={styles.header}>
<Text style={styles.headerText}>{section.title}</Text>
</View>
)}
keyExtractor={(item, index) => item + index}
/>
);
}
const styles = StyleSheet.create({
item: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
header: {
backgroundColor: '#f8f8f8',
padding: 10,
},
headerText: {
fontWeight: 'bold',
},
});
Styling
StyleSheet
Styling components with StyleSheet
React Native
import { StyleSheet, View, Text } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<View style={styles.box}>
<Text style={styles.boxText}>Styled Box</Text>
</View>
{/* Combining styles */}
<Text style={[styles.text, styles.boldText]}>
Bold text
</Text>
{/* Inline styles */}
<View style={{
marginTop: 20,
padding: 10,
backgroundColor: 'lightblue',
}}>
<Text>Inline styled component</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
alignItems: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
box: {
width: 150,
height: 150,
backgroundColor: 'tomato',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 5, // for Android
},
boxText: {
color: 'white',
fontWeight: 'bold',
},
text: {
fontSize: 16,
marginTop: 10,
},
boldText: {
fontWeight: 'bold',
color: 'blue',
},
});
Flexbox Layout
Using Flexbox for layouts
React Native
import { View, StyleSheet } from 'react-native';
export default function FlexboxExample() {
return (
<View style={styles.container}>
{/* Row layout */}
<View style={styles.row}>
<View style={[styles.box, { backgroundColor: 'red' }]} />
<View style={[styles.box, { backgroundColor: 'green' }]} />
<View style={[styles.box, { backgroundColor: 'blue' }]} />
</View>
{/* Column layout */}
<View style={styles.column}>
<View style={[styles.box, { backgroundColor: 'purple' }]} />
<View style={[styles.box, { backgroundColor: 'orange' }]} />
<View style={[styles.box, { backgroundColor: 'pink' }]} />
</View>
{/* Space between */}
<View style={styles.spaceBetween}>
<View style={[styles.box, { backgroundColor: 'teal' }]} />
<View style={[styles.box, { backgroundColor: 'brown' }]} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
row: {
flexDirection: 'row',
marginBottom: 20,
},
column: {
flexDirection: 'column',
marginBottom: 20,
},
spaceBetween: {
flexDirection: 'row',
justifyContent: 'space-between',
},
box: {
width: 50,
height: 50,
margin: 5,
},
});
Navigation
React Navigation
Navigation between screens with React Navigation
React Native
// Install dependencies
// npm install @react-navigation/native
// npm install @react-navigation/stack
// npm install react-native-screens react-native-safe-area-context
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, Text, View } from 'react-native';
const Stack = createStackNavigator();
// Home screen component
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', {
itemId: 86,
title: 'Item Details',
})}
/>
</View>
);
}
// Details screen component
function DetailsScreen({ route, navigation }) {
const { itemId, title } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>Item ID: {itemId}</Text>
<Text>Title: {title}</Text>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
// App component with navigation
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My Home' }}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
options={({ route }) => ({ title: route.params.title })}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
APIs & Networking
Fetch API
Making API requests with Fetch
React Native
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';
export default function FetchExample() {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const json = await response.json();
setData(json);
} catch (error) {
setError('Failed to fetch data');
console.error(error);
} finally {
setLoading(false);
}
};
if (isLoading) {
return (
<View style={styles.centered}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
if (error) {
return (
<View style={styles.centered}>
<Text style={styles.error}>{error}</Text>
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={data}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
<Text>{item.body}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
centered: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
item: {
backgroundColor: '#f9f9f9',
padding: 20,
marginVertical: 8,
borderRadius: 5,
},
title: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
},
error: {
color: 'red',
fontSize: 18,
},
});
React Native - Interactive Developer Reference
Hover over code blocks to copy or run in live playground