Developer Cheatsheets

Developer Cheatsheets

Built for developers, by XinhND

v2.1.0

Ready

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