Scribd
Upload
23 views3 pages

Tutorial03 Product List Exercises

The document outlines a tutorial for creating a React Native app that displays a product list using FlatList, allowing users to add new products through a form. It includes specifications for product fields, input validation, and styling requirements to enhance user experience. The final output should feature a scrollable product list, a form for adding products, and a visually appealing layout.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views3 pages

Tutorial03 Product List Exercises

The document outlines a tutorial for creating a React Native app that displays a product list using FlatList, allowing users to add new products through a form. It includes specifications for product fields, input validation, and styling requirements to enhance user experience. The final output should feature a scrollable product list, a form for adding products, and a visually appealing layout.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

MOBILE PROGRAMMING

Tutorial 03

Activity 01: Display Product List with Scroll and FlatList

Objective: Create a React Native app that displays a default list of products
using a FlatList.

1. Create a default list of products. Each product should have the following
fields:

o Name: The name of the product (e.g., "Apple iPhone 14").

o Price: The price of the product in USD (e.g., "$799").

o Description: A short description of the product (e.g., "Smartphone


by Apple").

id: "1",
name: "Apple iPhone 14",
price: "799",
description: "Smartphone by Apple",
},
{
id: "2",
name: "Samsung Galaxy S23",
price: "699",
description: "Flagship phone by Samsung",
},
{
id: "3",
name: "Sony WH-1000XM5",
price: "399",
description: "Noise-canceling headphones",
},
];

2. Use a FlatList to display the product list.


3. Each product item should display:

o Product Name (bold text).

o Product Price (e.g., "$799").

o Product Description (small text).

Expected Output:

 When the app starts, a scrollable list of products is displayed.

Activity 02: Add New Products to the List

Objective: Extend the app to allow users to add new products to the list.

1. Add a form at the bottom of the screen with the following input fields:

o Product Name: A text input field for the product name.

o Product Price: A numeric input field for the product price.

o Product Description: A text input field for the product description


(optional).

2. Add a button labeled "Add Product" below the input fields.

3. When the button is clicked:

o Validate that the Product Name and Product Price fields are not
empty.

o Add the new product to the list.

o Clear the input fields after adding the product.

Expected Output:

 Users can type in the form and click "Add Product" to add new items to
the product list.

 The list updates immediately to include the new product.


Activity 03: Handle Keyboard and Styling

Objective: Improve the app's user experience by handling the keyboard and
adding styling.

1. Keyboard Handling:

o Use KeyboardAvoidingView to ensure the keyboard does not cover


the input fields when typing.

2. Styling:

o Add a title at the top: "Product Management App".

o Style the FlatList items with the following:

 Rounded corners.

 Light background color.

 Padding for spacing.

o Style the input fields and button:

 Add borders and padding for the input fields.

 Use a button with a clear label and proper spacing.

Expected Output:

 The app should maintain a clean layout when the keyboard is open.

 The app should look visually appealing with consistent styling.

Submission

Submit a zip file containing all Java programs to this tutorial’s submission box
in the course website on FIT Portal.

You might also like