Discover React Native for creating rich, cross-platform mobile apps with reusable components. Gain insights into UI components, styling, navigation, Hooks, state, and database management.

native.tar.gz

reactNative

React Native is a well-known mobile application development framework that allows developers to create rich, cross-platform mobile application UI using reusable components. It's ideal for building mobile applications and supports multi-platform reusable code, pre-built components, and a rich UI. Most well-known social media platforms, such as Facebook and Instagram, have been built using React Native. 

In this course, you’ll start with a brief introduction to React Native and then cover various built-in components of React Native categorized into different categories such as basic, user interface, user interaction, and list view components. Next, you’ll learn about concepts such as application styling, navigation, Hooks, state management, and database management. You’ll find interactive quizzes and challenges throughout the course to test your understanding.

By the end of this course, you’ll be able to develop mobile applications and kickstart your journey as a React Native developer.

Getting Started with Mobile App Development with React Native

The Android widget below contains the solution to the challenge. We will also go through a step-by-step explanation of the solution.

> **Note:** Click the "Run" button on the Android widget below to execute the program. Wait for the program to compile inside the "Terminal" tab of the widget, and then switch to the "Output" tab once the program has been successfully compiled.

# Solution

import React, { useEffect } from "react";
import {
  View,
  Text,
  Image,
  BackHandler,
  DrawerLayoutAndroid,
  PermissionsAndroid,
  ToastAndroid,
  Button,
  Alert,
  StyleSheet,
} from "react-native";

const cLogo = require('./assets/languages/c.png')
const c_plus_plusLogo = require('./assets/languages/c_plus_plus.png')
const elixirLogo = require('./assets/languages/elixir.png')
const javaLogo = require('./assets/languages/java.png')

const App = () => {

  const backActionEvent = () => {
    Alert.alert("Wait!", "Do you want to exit the photo gallery?", [
      {
        text: "Yes", 
        onPress: () => BackHandler.exitApp() 
      },
      {
        text: "No",
        onPress: () => null,
      }
    ]);
    return true;
  };

  useEffect(() => {
    BackHandler.addEventListener(
      "hardwareBackPress",
      backActionEvent
    );
    return () =>
      BackHandler.removeEventListener("hardwareBackPress", backActionEvent);
  }, []);

  const requestCameraPermission = async () => {
    try {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message:
            'Photo gallery needs access to your camera',
            buttonNeutral: 'Never ask me again',
            buttonNegative: 'Deny',
            buttonPositive: 'Allow'
        }
      );

      if (result === PermissionsAndroid.RESULTS.GRANTED) {
        ToastAndroid.show("Permission granted!", ToastAndroid.SHORT);
      } else if (result === PermissionsAndroid.RESULTS.DENIED) {
        ToastAndroid.show("Permission denied!", ToastAndroid.SHORT);
      } else if (result === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
        ToastAndroid.show("Never ask for this permission again!", ToastAndroid.SHORT);
      }

    } catch (err) {
      ToastAndroid.show("Something went wrong!", ToastAndroid.SHORT);
    }
  }

  const checkCameraPermission = async () => {
    try {
      const result = await PermissionsAndroid.check(
        PermissionsAndroid.PERMISSIONS.CAMERA
      );

      if (result === true) {
        ToastAndroid.show("Permission was granted by the user", ToastAndroid.SHORT);
      } else {
        ToastAndroid.show("Permission was not granted! Requesting permission.", ToastAndroid.SHORT);
        requestCameraPermission();
      }

    } catch (err) {
      ToastAndroid.show("Something went wrong!", ToastAndroid.SHORT);
    }
  }

  const navigationView = (
    <View style={styles.drawerContainer}>
      <Text style={styles.drawerText}> All photos </Text>
      <Text style={styles.drawerText}> Favorites </Text>
      <Text style={styles.drawerText}> Trash </Text>
    </View>
  );

  const drawerRef = React.useRef(null);

  return (
    <DrawerLayoutAndroid
      renderNavigationView={() => navigationView}
      ref={ drawerRef }
      drawerPosition='left'
      drawerWidth={ 300 }
    >

      <View style={styles.columnStyle}>

        <View style={styles.topStyle}>
          <Text style={styles.text}> Photo Gallery </Text>
          <View style={styles.horizontalLine}></View>
        </View>

        <View style={styles.rowStyle}>
          <View style={styles.imageBox}>
            <Image style={styles.image} source={ cLogo } />
          </View>
          <View style={styles.imageBox}>
            <Image style={styles.image} source={ c_plus_plusLogo } />
          </View>
        </View>

        <View style={styles.rowStyle}>
          <View style={styles.imageBox}>
            <Image style={styles.image} source={ elixirLogo } />
          </View>
          <View style={styles.imageBox}>
            <Image style={styles.image} source={ javaLogo } />
          </View>
        </View>

        <View style={styles.rowStyle}>
          <Button 
            title="Take new photo"
            onPress={() => checkCameraPermission()}
          />
        </View>

      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  columnStyle: {
    flexDirection: 'column',
  },
  topStyle: {
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 20
  },
  text: {
    fontWeight: "700",
    fontSize: 35,
    marginTop: 40
  },
  horizontalLine: {
    width: 570,
    height: 3,
    backgroundColor: 'black',
    marginTop: 5
  },
  rowStyle: {
    flexDirection: 'row',
    marginTop: 40,
    justifyContent: 'space-around'
  },
  imageBox: {
    borderWidth: 3,
    width: 250,
    height: 250,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#DCAB6B"
  },
  image: {
    height: 200,
    width: 200,
    resizeMode: "stretch"
  },
  drawerContainer: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  },
  drawerText: {
    fontWeight: "800",
    fontSize: 30,
  },
});

export default App;

{
  "name": "reactnativeapp",
  "displayName": "reactnativeapp"
}

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};


/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};


In the solution code provided above:

- **Lines 22–34:** We create a function named `backActionEvent`. This function will be called once the user presses the hardware back button of the Android device or emulator. This function will display an alert message on the screen. If the user clicks "Yes," the application will exit. Otherwise, the application will remain as it is.

- **Lines 36–43:** We use the `addEventListener` method of the `BackHandler` API to register the event `hardwareBackPress`. We also pass the `backActionEvent` as the callback function to this method. Finally, we use the `removeEventListener` method of the `backHandler` API to unregister the event `hardwareBackPress`. We pass the same callback function while unregistering the event. We perform both of these steps inside the `useEffect` Hook.

- **Lines 45–70:** We create an async function named `requestCameraPermission`. Inside this function, we use the `request` method of the `PermissionsAndroid` API to request camera permission. Finally, we use the `PermissionsAndroid.RESULTS` to check for result strings of the permission and then display appropriate toasts.

- **Lines 72–88:** We create an async function named `checkCameraPermission`. Inside this function, we use the `check` method of the `PermissionsAndroid` API to check whether the camera permission has been granted by the user or not. We then display appropriate toasts accordingly. If the user has not been granted permission, we pass the `requestCameraPermission` function and ask the user for camera permission.

- **Lines 90–96:** We create a function named `navigationView`. We pass this function to the `renderNavigationView` prop of the `DrawerLayoutAndroid` component at **line 102**. It will render `View` and `Text` components inside the drawer layout. 

- **Line 98:** We create a reference to the drawer using the `React.useRef` method. We pass this reference to the `ref` prop of the `DrawerLayoutAndroid` component at **line 103**.

- **Lines 101–106:** We add the `DrawerLayoutAndroid` component and pass the appropriate props to it. The corresponding closing tag is placed at **line 141**.

- **Line 136:** We pass the `checkCameraPermission` function to the `onPress` prop of the `Button` component.

- **Lines 186–194:** We add the styles for the `View` and `Text` components using the `StyleSheet`.


Get a detailed review of the solution to the challenge.

Before We Begin

Introduction to React Native

Basic Components

User Interface and User Interaction

List View

Android Components and APIs

Miscellaneous Components and APIs

Application Styling

Navigation

Hooks

State Management

Database Management

Appendix

Solution Review: Android Components and APIs