React Native cheatsheet for beginners
Tags: reactnative, mobile, beginners, programming
Published: 2022-12-17 17:34:18

React native is one of the most demanding cross platform frameworks developed by Meta (Facebook) for creating mobile applications with ease. It follows Learn Once, Write Anywhere paradigm which allows users to create components using Javascript, HTML5 and CSS files.

React Native redefines the functionality of native apps, which were earlier inefficient and slow to deploy. It creates hybrid apps along with native functionality. It is based on React.js UI library which makes it easy to switch between web developers and mobile app developers.

In this article, we provide a small cheat sheet for react native developers to make the development process handy.

## Getting Started
### Table of contents
- Creating an app
- Running the app
- Upgrading React Native
- Code snippets
- Components
- State and props
- useState and useEffect
- Core Components
- View
- ScrollView
- Text
- Image
- Button
- TouchableHighlight / TouchableOpacity
- TextInput
- FlatList
- Stylesheet
- Inline Styling
- Flexbox
- Detecting Screen Size
- Navigation
- useNavigation Hook
- BackHandler android
- Networking
- Creating a sample app
- React Native Cheatsheet
Let’s have a look at some of the key points of react native.

### Creating an app
To create a new mobile app, open the terminal and execute the following commands,

```
npx react-native init AppName
//or
npx create-react-native-app AppName
```
### Running the app
To run the app, open the terminal and execute the following commands,

```
cd AppName
npx react-native run-android
//or
npx react-native run-android
```
### Upgrading React Native
To upgrade react native to the latest version, open the terminal and execute the following commands,

```
npm install react-native@latest;
```
### Code snippets
Let’s go through some code snippets which are commonly used in react native projects.

### Components
Components are light weight modules, considered as core building blocks of React and React-Native apps. The App component is the default component which binds with the virtual dom in react native. Each component in react native has the following structure (It is optional to provide View and Text components).

```
import * as React from 'react';
import {View, Text, StyleSheet} from 'react-native'

const App = () => {
    return (
        <View style={styles.container}>
            <Text>Hello World</Text>
        </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;
```
### State and props
State is a mutable store that holds the whole state tree of the application.
Props is an immutable react native object set by the parent, and they are fixed throughout the lifetime of a component.

```
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default App = (props) => {
  const [count, setCount] = useState(0);

  return (
    <View >
      <Text style={styles.header}>
        {props.title?.toUpperCase()}
      </Text>
      <Text>Count: {count}</Text>
    </View>
  );
}

App.defaultProps = {
  title: 'Hello React Native'
}

const styles = StyleSheet.create({
  header: {
    fontFamily: 'Roboto',
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
```
### useState and useEffect
The useState hook allows to track state in a function component.
The useEffect hook allows user to perform side effects such as fetching data, directly updating the DOM, and timers in the application.

```
import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>Count: {count}</h1>;
}
```
### Core Components
Core components are ready to use components available in React Native, which includes <View>,<ScrollView>, <Text>,<TextInput>, FlatList,<Image>, <Button> and <Flexbox>.

### View
The `<View>` component act as a container and can be translated as `<div>` from web.

```
function App() {
  return (
    {/* Base layout structure */}
    <View style={{ flex: 1 }}>
      {/* Simple background color */}
      <View style={{ padding: 10, color: 'blue' }}>
        <Text>Text with background color</Text>
      </View>
      {/* Space layout structure */}
      <View style={{ margin: 10 }} />
    </View>
  );
}
```
### ScrollView
Similar to `View`, it is a generic container with scrolling support to provide responsive layout for different devices.

```
function App() {
  return (
    <ScrollView>
      <Text style={{ margin: 10 }}>Hello World</Text>
      <View style={{ marginTop: 512 }} />
      <Text style={{ margin: 10 }}>Welcome to React Native</Text>
    </ScrollView>
  );
}
```
### Text
The `<Text>` component is used to display text in React Native.

```
function App() {
  return (
    <Text style={{ height: 20, margin: 10 }}>
      Hello World
    </Text>
  );
}
```
### Image
The `<Image>` component is used to render images in react native. It accepts images from remote and local sources.

```
function App() {
  return (
    <>
      <Image source={require('./assets/logo.jpg')} />
      <Image source={{ uri: 'https://github.com/codemaker2015/codemaker2015/raw/main/codemaker.png' }} />
      <Image source={{ uri: 'data:image/png;base64,<base64-string>=' }} />
    </>
  );
}
```
### Button
The `<Button>` component is a touchable element used to interact with the screen and to perform operations.

```
function App() {
  return (
    <Button
      onPress={onPressSubmit}
      title="Submit"
      color="#FFFFFF"
    />
  );
}
```
### TouchableHighlight / TouchableOpacity
The `<TouchableHighlight>` / `<TouchableOpacity>` component is a wrapper for making views respond in accordance to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through. It must have at least one child component.

```
import React, {useState} from 'react';
import {Text, TouchableHighlight, TouchableOpacity, View} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrement = () => setCount(count + 1);
  const onDecrement = () => setCount(count - 1);

  return (
    <View
      style={{
        flex: 1,
        margin: 20,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Count: {count}</Text>
      <TouchableOpacity
        onPress={onIncrement}
        style={{backgroundColor: '#F3F3F3', margin: 20, padding: 20}}>
        <Text>+</Text>
      </TouchableOpacity>
      <TouchableHighlight
        onPress={onDecrement}
        style={{backgroundColor: '#F3F3F3', margin: 20, padding: 20}}>
        <Text>-</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;
```
### TextInput
The `<TextInput>` component allows user to enter text into the app. It has an onChangeText event which is called every time the text changes.

```
import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';

const App = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 15}}>
      <TextInput
        style={{height: 50}}
        placeholder="Enter name"
        onChangeText={name => setText(name)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 30}}>{text}</Text>
    </View>
  );
};

export default App;
```
### FlatList
The `<FlatList>` component displays a scrolling list of items. It renders only those elements that are currently shown on the screen.

The FlatList component requires two props: `data` and `renderItem`. `data` is the source of the list and `renderItem` returns a formatted component to render.

```
import React from 'react';
import {FlatList, Text, View} from 'react-native';

const App = () => {
  return (
    <View>
      <FlatList
        data={[
          {key: 'January'},
          {key: 'February'},
          {key: 'March'},
          {key: 'April'},
        ]}
        renderItem={({item}) => <Text>{item.key}</Text>}
      />
    </View>
  );
};
```
### Stylesheet
The `<StyleSheet>` is an abstraction that replaces CSS by accepting CSS styling rules using a two-dimensional JavaScript object.

```
function App() {
  return (
    <>
      <Text style={styles.heading}>React Native</Text>
      <Text style={styles.message}>Hello World</Text>
    </>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 16,
  },
  message: {
    fontSize: 11,
    textTransform: 'uppercase',
  },
});
```
### Inline Styling
React native allows users to add style within the HTML element using double curly brackets (`{{}}`).

```
function App() {
    const [color, setColor] = useState("red");
    return (
       <View>
         <Text style={{"border":`1px solid ${color}`}}>Color: {color}</Text>
       </View>
    );
}
```
### Flexbox
The `<Flexbox>` component is used to layout the component’s children.

```
import { View, Text, StyleSheet } from "react-native";

const App = () => {
  return (
    <View style={[styles.container, {
      // Try setting `flexDirection` to `"column"`.
      flexDirection: "column"
    }]}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
      <View style={{ flex: 2, backgroundColor: "orange" }} />
      <View style={{ flex: 3, backgroundColor: "green" }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  }
});

export default App;
```
### Detecting Screen Size
Detecting the screen size of the device is essential to alter the layout, text sizes, and other aspects of the app.

```
import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

alert(Screen size: ${width}x${height});
```
### Navigation
React Navigation’s native stack navigator provides a way for your app to transition between screens and manage navigation history.

In the react-navigation library, all navigator methods follow a naming pattern like `create<type>Navigator()`, which returns an object with Navigator and Screen properties.

`createNativeStackNavigator` is a function that returns an object containing 2 properties: `Screen` and `Navigator`.
NavigationContainer is a component which manages the navigation tree and contains the navigation state.
To install the library, execute the following code.

```
npm install @react-navigation/native-stack
```
Usage
In the below code, a home screen component is created and binded with the stack navigator.

```
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```
### useNavigation Hook
The `useNavigation` hook provides access to the navigation API and can be used to implement transition from one screen to another.

```
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function App() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}
export default App;
```
###  BackHandler android
In order to handle the back button actions from the code, the BackHandler API helps to detect hardware button presses for back navigation, and registers event listeners for the system’s back action.

```
import {useEffect} from 'react';
import {BackHandler} from 'react-native';

function App() {
  useEffect(() => {
    const backAction = () => {
      console.log("back button pressed");
      return false; // back button is enabled
      return true;  // back button is disabled
    };

    // Register for hardware back event and attach a handler to it
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

    return () => backHandler.remove();
  }, []);
};

export default App;
```
### Networking
Most of the mobile apps require to load resources from a remote URL. React Native provides the Fetch API for fetching data from remote sources.

```
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const getMovies = async () => {
     try {
      const response = await fetch('https://reactnative.dev/movies.json');
      const json = await response.json();
      setData(json.movies);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getMovies();
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.title}, {item.releaseYear}</Text>
          )}
        />
      )}
    </View>
  );
}
export default App;
```
## Creating a sample app
Let’s try to create a profile component to get in touch with the react native components and other functionalities.

- Create a new react native project using the following command

```
npx react-native init MyProfileApp
```
- Open App.js file and add the following code to it.

```
import React, {useState, useEffect} from 'react';
import {
  Button,
  Image,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Linking,
  Dimensions,
  ActivityIndicator,
} from 'react-native';

const {width, height} = Dimensions.get('window');

function Link(props) {
  return (
    <Text
      {...props}
      accessibilityRole="link"
      style={StyleSheet.compose(styles.link, props.style)}
    />
  );
}

function App() {
  const [logoUri, setLogoUri] = useState(
    'https://avatars.githubusercontent.com/',
  );
  const [loading, setLoading] = useState(false);

  const getLogoUri = async () => {
    try {
      setLoading(true);
      const response = await fetch(
        'https://api.github.com/users/codemaker2015',
      );
      const json = await response.json();
      setLogoUri(json?.avatar_url);
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  };

  useEffect(() => {
    console.log('component is mounted');
    getLogoUri();
    return () => {
      console.log('component is unmounted');
    };
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.app}>
      <View style={styles.header}>
        {loading ? (
          <ActivityIndicator />
        ) : (
          <Image
            accessibilityLabel="React logo"
            source={{uri: logoUri}}
            resizeMode="contain"
            style={styles.logo}
          />
        )}
        <Text style={styles.title}>Vishnu Sivan</Text>
      </View>
      <Text style={styles.subTitle}>Immersive tech lead, TCS RapidLabs</Text>
      <Text style={styles.text}>
        Seasoned professional, forward looking software engineer with 3+ years
        of experience in creating and executing innovative solutions in
        immersive field to enhance business productivity.
        {'\n\n'}
        <Link
          href="https://github.com/necolas/react-native-web"
          onPress={() => {
            Linking.openURL('https://github.com/codemaker2015');
          }}>
          Know more about me
        </Link>
      </Text>
      <Button
        onPress={() => {
          Linking.openURL('mailto:codemaker2015@gmail.com');
        }}
        title="Contact Me"
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F3F3F3',
    width: width,
    height: height,
  },
  logo: {
    width: 180,
    height: 180,
    borderRadius: 10,
  },
  header: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  title: {
    fontWeight: 'bold',
    fontSize: 30,
    marginVertical: 10,
    textAlign: 'center',
  },
  subTitle: {
    fontWeight: 'bold',
    fontSize: 20,
    marginVertical: 10,
    textAlign: 'center',
  },
  text: {
    lineHeight: 20,
    fontSize: 18,
    margin: 18,
    textAlign: 'center',
  },
  link: {
    color: '#1B95E0',
  },
});
export default App;
```
- Run the app by executing the following command

```
npx react-native run-android
```
You can see the following page after the successful run

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfgl26tfg7dch8nhgsio.gif)

There you have it! Your own profile app using React native :)

## React Native Cheatsheet

![cheatsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7edgr9abtwr4z8i20vjk.png)

Thanks for reading this article.

Thanks Gowri M Bhatt for reviewing the content.

If you enjoyed this article, please click on the heart button ♥ and share to help others find it!

The full source code for this tutorial can be found here,

[GitHub - codemaker2015/react-native-cheatsheet](https://github.com/codemaker2015/react-native-cheatsheet)

The article is also available on [Medium](https://codemaker2016.medium.com/react-native-cheatsheet-for-beginners-ce0559365d68).

Here are some useful links,

- [React Native · Learn once, write anywhere](https://reactnative.dev/)
- [Learn React Native: Core Components Cheatsheet | Codecademy](https://www.codecademy.com/learn/learn-react-native/modules/core-components-react-native/cheatsheet)
- [UTM CSSC](https://cssc.utm.utoronto.ca/resources/react-native/#what-is-react-native)