Gallery
Share
Explore

Create a cross-platform application using React Native

Peter Sigurdson
Last edited 157 days ago by System Writer

Learning Outcome:

Deliver the following REACT Application: Create a cross-platform application using React Native to do the following. Application should be able to run in one of the simulators/emulators (iOS/Android).


Allows to add a Product information (as an object) to an array using the following information:
Product ID (5-digit number)
Product Name
Product Category
Supplier
Price
• User can click on Display button to display all the array information on screen in a table format.
• User can continue adding products in the array and every time Display button is clicked, the table is updated accordingly.
• Your app should have 4 products already in an array (hard-coded).
• User can sort the table by price (high to low and low to high).
• User can delete a product from the table.
• User can edit the product data.
• User can also search for employees by Product ID (in this case, the table filters the products to show only the match (if no match is found, a message “No Product found” should be displayed).
• User can also search for products by Product Category (in this case, the table filters the products to show only the products with the same category). If no match is found, a message “No Products belong in this Category” should be displayed.

Student Lab Workbook: React Native Product Management App

Introduction

In this lab, we will be creating a cross-platform mobile application using React Native that allows users to manage a list of products. Users can add new products, view all products, sort the list by price, edit and delete products, and search for products by ID or category. We will be using the following technologies:

React Native
Expo
JavaScript

Prerequisites

Before starting this lab, you should have the following installed:
Node.js
Expo CLI
Expo Go App (for testing on mobile devices)
A code editor (such as VS Code)


Step 1: Set up the project

Open your terminal and create a new directory for the project.
Navigate to the new directory and run the following command to create a new React Native project:

expo init ProductManagementApp



Choose the "blank" template when prompted.
Once the project is created, navigate to the project directory and start the development server by running the following command:


npm start


This will open the Expo Developer Tools in your browser. From here, you can run the app in a simulator or emulator, or scan the QR code with the Expo Go app to test it on a mobile device.

Step 2: Create the ProductForm component


Create a new file called ProductForm.js in the components directory.
In this file, import the following:

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


Create a functional component called ProductForm that takes in a prop called addProduct. here's an example of what the code might look like in React:
import React, { useState } from 'react';

function ProductForm({ addProduct }) {
const [productName, setProductName] = useState('');
const [productPrice, setProductPrice] = useState(0);

const handleSubmit = (event) => {
event.preventDefault();
addProduct(productName, productPrice);
setProductName('');
setProductPrice(0);
}

return (
<form onSubmit={handleSubmit}>
<label htmlFor="productName">Product Name:</label>
<input type="text" id="productName" value={productName} onChange={(event) => setProductName(event.target.value)} />

<label htmlFor="productPrice">Product Price:</label>
<input type="number" id="productPrice" value={productPrice} onChange={(event) => setProductPrice(event.target.value)} />

<button type="submit">Add Product</button>
</form>
);
}

export default ProductForm;



In this code, ProductForm is a functional component that accepts a prop called addProduct. This prop is a function that takes in a product name and price and adds it to some kind of list or data structure.


The component contains two local state variables: productName and productPrice, which are initialized to empty strings and 0, respectively. These variables are updated whenever the user types into the two input fields using the onChange event handler.


When the user submits the form, the handleSubmit function is called. This function prevents the default form submission behavior (which would refresh the page) and instead calls the addProduct function passed in as a prop, passing in the current values of productName and productPrice. It then resets the two state variables to their initial values, clearing the input fields.


Finally, the component returns a form with two input fields for the product name and price, as well as a submit button that triggers the handleSubmit function when clicked.
Inside the component, define a state variable called product with the following properties:

const [product, setProduct] = useState({
productId: '',
productName: '',
productCategory: '',
supplier: '',
price: '',
});


Define a handleChange function that takes in an event object and updates the product state with the new input value:

const handleChange = (event) => {
const { name, value } = event.target;
setProduct((prevProduct) => ({
...prevProduct,
[name]: value,
}));
};


Define a handleSubmit function that creates a new product object by copying the product state, then calls the addProduct prop with the new product object:

const handleSubmit = () => {
const newProduct = { ...product };
addProduct(newProduct);
setProduct({
productId: '',
productName: '',
productCategory: '',
supplier: '',
price: '',
});
};


Render a form with input fields for each property of the product state, a submit button that calls the handleSubmit function, and a label for each input field.

return (
<View>
<Text>Add a new product:</Text>
<TextInput
placeholder="Product ID"
name="productId"
value={product.productId}
onChangeText={handleChange}
/>
<TextInput
placeholder="Product Name"
name="productName"
value={product.productName}
onChangeText={handleChange}
/>
<TextInput
placeholder="Product Category"
name="productCategory"
value={product.productCategory}
onChangeText={handleChange}
/>
<TextInput
placeholder="Supplier"
name="supplier"
value={product.supplier}
onChangeText={handleChange}
/>
<TextInput
placeholder="Price"
name="price"
value={product.price}
onChangeText={handleChange}
/>
<Button title="Add Product" onPress={handleSubmit} />
</View>
);


Step 3: Create the ProductTable component


Create a new file called ProductTable.js in the components directory.
In this file, import the following:

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


Create a functional component called ProductTable that takes in a prop called products and three methods for editing, deleting, and sorting the list.
Inside the component, define a renderItem function that takes in an object and renders a View with Text components for each property of the object:

const renderItem = ({ item }) => (
Product ID: {item.productId} Product Name: {item.productName} Product Category: {item.productCategory} Supplier: {item.supplier} Price: {item.price}</

Here's an example of what the code might look like in React:


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

function ProductTable({ products, editProduct, deleteProduct, sortProducts }) {
const renderItem = (product) => (
<View key={product.id}>
<Text>{product.name}</Text>
<Text>{product.price}</Text>
<TouchableOpacity onPress={() => editProduct(product.id)}>
<Text>Edit</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => deleteProduct(product.id)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
);

return (
<View>
<TouchableOpacity onPress={() => sortProducts('name')}>
<Text>Sort by Name</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => sortProducts('price')}>
<Text>Sort by Price</Text>
</TouchableOpacity>

{products.map(renderItem)}
</View>
);
}

export default ProductTable;



In this code, ProductTable is a functional component that accepts a prop called products, as well as three methods for editing, deleting, and sorting the list.
Inside the component, we define a renderItem function that takes in a product object and returns a View component containing Text components for each property of the object (in this case, name and price). It also includes two TouchableOpacity components for editing and deleting the item, which call the editProduct and deleteProduct functions passed in as props, respectively.
In the ProductTable component's return statement, we render two TouchableOpacity components for sorting the list by name or price. These components call the sortProducts function passed in as a prop with the corresponding sort criterion.
Finally, we use the map function to render each item in the products array by calling the renderItem function we defined earlier.
Learning Outcome:
Deliver the following REACT Application: Create a cross-platform application using React Native to do the following. Application should be able to run in one of the simulators/emulators (iOS/Android).
Student Lab Workbook: React Native Product Management App
Introduction
Prerequisites
Step 1: Set up the project
Step 2: Create the ProductForm component
Step 3: Create the ProductTable component
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.