COMSATS University Islamabad Lahore Campus

Sessional-II – SPRING 2021

Course Title: Mobile App Development Course Code: CSC 303 Credit Hours: 3(2,1)
Course Rana M. Ajmal Program Name: BSE
Instructor/s:
Semester: 6th Batch: SP18 Section: A Date: 20.5.2021
Time Allowed: 90 Minutes Maximum Marks: 15
Student’s Name: Reg. No.
Important Instructions / Guidelines:

 Avoid overwriting and cutting.

 Read the questions carefully.

Submission Instructions:

1. You may solve coding question on your computer and then copy in the word file
2. Please make one world file as a solution and post in Google Class Room
3. The name of the file should be as follows
S2_Lab_YourName_YourRollNumber.docx

Problem Statement [15 credits]:

Consider a live API server that give the list of users as response when the API end point
(https://reqres.in/api/users?page=1) is sent an http get request.
{
{
page: 1,
per_page: 6,
total: 12,
total_pages: 2,
data: [
{
id: 1,
email: "george.bluth@reqres.in",
first_name: "George",
last_name: "Bluth",
avatar: "https://reqres.in/img/faces/1-image.jpg"
},
{
id: 2,
email: "janet.weaver@reqres.in",
first_name: "Janet",
last_name: "Weaver",
avatar: "https://reqres.in/img/faces/2-image.jpg"
 },
{
id: 3,
email: "emma.wong@reqres.in",
first_name: "Emma",
last_name: "Wong",
avatar: "https://reqres.in/img/faces/3-image.jpg"
},
{
id: 4,
email: "eve.holt@reqres.in",
first_name: "Eve",
last_name: "Holt",
avatar: "https://reqres.in/img/faces/4-image.jpg"
},
{
id: 5,
email: "charles.morris@reqres.in",
first_name: "Charles",
last_name: "Morris",
avatar: "https://reqres.in/img/faces/5-image.jpg"
},
{
id: 6,
email: "tracey.ramos@reqres.in",
first_name: "Tracey",
last_name: "Ramos",
avatar: "https://reqres.in/img/faces/6-image.jpg"
}
],
support: {
url: "https://reqres.in/#support-heading",
text: "To keep ReqRes free, contributions towards server costs are appreciated!"
}
}
}

and, further one can get the detail of a user by sending a get http request to the API end
point (https://reqres.in/api/users/<id>).

Write a React Native App that should consists of the 2 screens: List Screen and User
Screen. When the app starts, it should display List Screen. Use Navigation API for
managing screens and routing.

List Screen:
 1. Send an http request to the server when the App starts using useEffect React Hook
[2 Credits]
2. Parse the http response and save in React state using useState React Hook
[2 Credits]
3. Display results (only fist name, last name and email of each user) in the FlatList
[2 Credits]
4. Show the activity loader while data is being loaded
[1 Credits]
5. Show error message if there is an error while loading data
[1 Credits]
6. When user clicks on any user, its detail will be opened in a new screen called User
Screen. Pass user id as routing parameter.
[2 Credits]

User Screen:
1. Extract user id parameter from the Route.
[1 Credits]
2. Send an http request to the server to get detail of user using useEffect React Hook
[2 Credits]
3. Display detail of User (all fields and avatar) in User screen
[2 Credits]