React Native Cheat Sheet

Complete reference guide for React Native with interactive examples and live playground links

Getting Started

3 items

Installation

Project Structure

Running the App

Core Components

2 items

Basic Components

List Components

Styling

2 items

StyleSheet

Flexbox Layout

Navigation

1 items

React Navigation

APIs & Networking

1 items

Fetch API

Click on any section to jump directly to it

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

Developer Cheatsheets

React Native Cheat Sheet

Getting Started

Core Components

Styling

Navigation

APIs & Networking

Getting Started

Installation

Project Structure

Running the App

Core Components

Basic Components

List Components

Styling

StyleSheet

Flexbox Layout

Navigation

React Navigation

APIs & Networking

Fetch API