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 from 'react';
import { 
  SafeAreaView, 
  View, 
  SectionList, 
  Image, 
  StyleSheet, 
  Text 
} from 'react-native';

const avocado = require('./assets/fruits/avocado.png')
const banana = require('./assets/fruits/banana.png')
const peach = require('./assets/fruits/peach.png')
const pineapple = require('./assets/fruits/pineapple.png')
const burger = require('./assets/junk/burger.png')
const pizza = require('./assets/junk/pizza.png')
const spaghetti = require('./assets/junk/spaghetti.png')

const App = () => {

  const fruits = [
    {
      id: '1',
      name: 'Avocado',
      image: avocado,
      price: '$3.00',
    },
    {
      id: '2',
      name: 'Banana',
      image: banana,
      price: '$2.00',
    },
    {
      id: '3',
      name: 'Peach',
      image: peach,
      price: '$4.00',
    },
    {
      id: '4',
      name: 'Pineapple',
      image: pineapple,
      price: '$5.00',
    },
  ];

  const junk = [
    {
      id: '5',
      name: 'Burger',
      image: burger,
      price: '$10.00',
    },
    {
      id: '6',
      name: 'Pizza',
      image: pizza,
      price: '$15.00',
    },
    {
      id: '7',
      name: 'Spaghetti',
      image: spaghetti,
      price: '$13.00',
    },
  ];

  const hotSelling = [
    {
      id: '8',
      name: 'Burger',
      image: burger,
      price: '$10.00',
    },
    {
      id: '9',
      name: 'Pizza',
      image: pizza,
      price: '$15.00',
    },
    {
      id: '10',
      name: 'Banana',
      image: banana,
      price: '$2.00',
    },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.box}>
      <Image style={styles.image} source={ item.image } />
      <Text style={styles.text}> { item.name } </Text>
      <Text style={styles.text}> { item.price } </Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={[
          {title: 'Fruits', data: fruits},
          {title: 'Junk Food', data: junk},
          {title: 'Hot Selling', data: hotSelling},
        ]}
        renderItem={ renderItem }
        renderSectionHeader={({section}) => (
          <Text style={styles.sectionHeader}>
            {section.title}
          </Text>
        )}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  box: {
    flex: 1,
    flexDirection: "row",
    borderWidth: 2,
    width: 500,
    height: 100,
    alignItems: "center",
    justifyContent: "space-around",
    marginRight: 50,
    marginLeft: 50,
    marginTop: 18,
    marginBottom: 18,
    backgroundColor: "white",
    borderRadius: 16,
  },
  image: {
    height: 70,
    width: 70,
    resizeMode: "contain"
  },
  text: {
    fontWeight: '600',
    fontSize: 20,
  },
  sectionHeader: {
    fontWeight: 'bold',
    fontSize: 30,
    backgroundColor: 'orange',
    paddingLeft: 233,
  },
});

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 11–17:** We import the required images from assets.

- **Lines 21–46:** We create an array of items named `fruits`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 48–67:** We create an array of items named `junk`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 69–88:** We create an array of items named `hotSelling`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 90–96:** We create a function named `renderItem`. This function will be passed to the `SectionList` component (**line 106**) to render the list items.

- **Lines 122–151:** We add the styles for the `View`, `Image`, and `Text` components using the `StyleSheet`.  

- **Lines 100–112:** We add the `SectionList` component and set the following props inside it:
  - `sections={[
          {title: 'Fruits', data: fruits},
          {title: 'Junk Food', data: junk},
          {title: 'Hot Selling', data: hotSelling},
        ]}`
  - `renderItem={ renderItem }`
  - `renderSectionHeader={({section}) => (
          <Text style={styles.sectionHeader}>
            {section.title}
          </Text>
        )}`

In the solution code provided above:

- **Lines 11–17:** We import the required images from assets.

- **Lines 21–46:** We create an array of items named `fruits`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 48–67:** We create an array of items named `junk`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 69–88:** We create an array of items named `hotSelling`. Each item in the array has the following attributes:
   - `id`
   - `name`
   - `image`
   - `price`

- **Lines 90–96:** We create a function named `renderItem`. This function will be passed to the `SectionList` component (**line 106**) to render the list items.

- **Lines 122–151:** We add the styles for the `View`, `Image`, and `Text` components using the `StyleSheet`.  

- **Lines 100–112:** We add the `SectionList` component and set the following props inside it:
  - `sections={[
          {title: 'Fruits', data: fruits},
          {title: 'Junk Food', data: junk},
          {title: 'Hot Selling', data: hotSelling},
        ]}`
  - `renderItem={ renderItem }`
  - `renderSectionHeader={({section}) => (
          <Text>
            {section.title}
          </Text>
        )}`

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: List View