Scribd
Upload
11 views3 pages

Tutorial05 Navigation

This document outlines a tutorial for implementing a basic Stack Navigator in React Native through three activities. The first activity involves creating a simple app with navigation between Home and Details screens, while the second focuses on developing a Product Management App with a Product List and Product Detail screen. The third activity requires refactoring the app to include a separate Add Product screen, ensuring proper navigation and data management throughout the application.

Uploaded by

ilovebhgaming
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
11 views3 pages

Tutorial05 Navigation

This document outlines a tutorial for implementing a basic Stack Navigator in React Native through three activities. The first activity involves creating a simple app with navigation between Home and Details screens, while the second focuses on developing a Product Management App with a Product List and Product Detail screen. The third activity requires refactoring the app to include a separate Add Product screen, ensuring proper navigation and data management throughout the application.

Uploaded by

ilovebhgaming
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 05

Activity 01: Implementing a basic Stack Navigator in React Native


Create a simple React Native app using @react-navigation/native-stack to
navigate between two screens: Home and Details.
Requirements:
1. Install the necessary dependencies:
npm install @react-navigation/native-stack
2. Implement the navigation between two screens:
o Home screen: Displays a button that navigates to the Details screen.
o Details screen: Displays a button to go back to the Home screen.
3. Customize the screen title using the options property.
4. Set the Home screen as the initial route.

Activity 02: Implement a Product Management App with Navigation in


React Native
Create a React Native application with two screens:
1. A Product List screen that displays a list of products.
2. A Product Detail screen that shows detailed information about a selected
product.
You need to implement the following functionalities:
Requirements:
1. Product List screen:
o Display a list of products using FlatList.
o Each product should show the name and price.
o When a user taps on a product, navigate to the Product Detail
screen and pass the selected product’s details to it.
o Include a form to add new products with fields: name, price, and
description.
o When the "Add Product" button is pressed, the new product should
be added to the list.
2. Product Detail screen:
o This screen should display the name, price, and description of the
selected product.
3. Navigation:
o Use React Navigation to navigate between the two screens (Product
List and Product Detail).
o The Product List screen should allow the user to go to the Product
Detail screen by tapping on a product.
4. Styling:
o Style the application to make it user-friendly, with clear distinctions
between different sections (product list, form, etc.).
Activity 03: Refactor Product Management App to add a separate Add
Product screen
Refactor your existing Product Management App by splitting the Add Product
functionality into a new screen and implementing navigation to and from that
screen.
Requirements:
1 Create a new Screen for adding Products:
 Move the Add Product form from the main screen to a new screen called
Add Product.
 The Add Product screen should have:
o Text fields for name, price, and description of the product.
o A button to submit the new product.
2 Navigation:
 Set up navigation between the following screens using React Navigation:
o Product List screen (displays all products).
o Add Product screen (to add a new product).
o When the user adds a product, navigate back to the Product List
screen.
3 Passing data:
 Once the product is added, ensure that it appears in the Product List
screen.
 Use state management to persist the list of products (you can use
useState for local state).

Submission
Compress your relevant project files (App.js, components, assets folder, etc.)
into zip files (1 zip file per activity) and put all zip files into a single zip file.
Submit the final zip file to this tutorial’s submission box on FIT LMS.

You might also like