Scribd
Upload
50 views

React Native Assignment

The assignment requires building a mobile app called 'User Directory' that fetches and displays a list of users from the JSONPlaceholder API, featuring a user list screen with infinite scrolling and a details screen for user information. Key tasks include implementing API integration, navigation using React Navigation, state management with hooks, and ensuring a clean UI/UX design. Optional bonus features include a search bar, pagination, sorting users, and submitting an APK for testing.

Uploaded by

Divakar Gupta
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
50 views

React Native Assignment

The assignment requires building a mobile app called 'User Directory' that fetches and displays a list of users from the JSONPlaceholder API, featuring a user list screen with infinite scrolling and a details screen for user information. Key tasks include implementing API integration, navigation using React Navigation, state management with hooks, and ensuring a clean UI/UX design. Optional bonus features include a search bar, pagination, sorting users, and submitting an APK for testing.

Uploaded by

Divakar Gupta
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

REACT NATIVE ASSIGNMENT: BUILD A "USER DIRECTORY" APP

Objective: You will build a mobile app called User Directory. This app should fetch a list of users
from a public API and display it in a clean, user-friendly format. When a user taps on an entry, it
should navigate to a details screen that shows more information about the user. This assignment
will help us assess your skills with React Native, API integration, navigation, state management,
and UI/UX design.

App Name: User Directory

APP OVERVIEW:

The "User Directory" app will display a list of users fetched from the JSONPlaceholder API. Each
user’s name and email will be displayed in the list. When the user taps on an entry, it will navigate to
a new screen showing more detailed information such as address, company, and more.

CORE FEATURES TO IMPLEMENT:


1. User List Screen:

• Fetch Data: Use either fetch or axios to fetch data from the JSONPlaceholder API.
• Display Users: Each item should display the user’s name and email.
• Infinite Scrolling: Implement infinite scrolling to fetch and display additional users as the user
scrolls down.
• Navigation to Details Screen: When the user taps on a user item, it should navigate to a details
screen displaying more information about that user.

2. User Details Screen:

• Display User Details: On the details screen, display the following information:

o Name
o Email
o Address (Street, City, Zip)
o Company Name
• Return to User List: Allow the user to return to the user list screen by pressing a back button or
swipe gesture.

3. API Integration:

• Data Fetching: Handle API calls using fetch or axios.


• Error Handling: Implement proper error handling in case of network failure or empty data (e.g.,
show an error message if the API fails).
• Loading State: Show a loading indicator (e.g., spinner) while fetching data from the API.

4. Navigation:

• React Navigation: Use React Navigation for navigating between screens.


• Stack Navigation: Use stack navigation to allow navigation between the "User List" and "User
Details" screens.
• Back Navigation: Implement a back navigation button on the details screen to go back to the user
list.

5. State Management:

• Use useState and useEffect hooks to manage state for the fetched data.
• Ensure proper management of state for data fetching, display, and navigation.

6. UI/UX:

• Clean and Simple Design: The design should be clean and easy to use.
• FlatList: Use FlatList for displaying the list of users to optimize performance.
• Detailed View: Display user details clearly in a readable format on the details screen.
• Styling: Use StyleSheet or a UI framework like React Native Paper or NativeBase to style the app.
• Responsive Layout: Ensure the app is responsive and works on both small and large screens.

BONUS FEATURES (OPTIONAL):


1. Search Bar: Implement a search bar that filters users by name.
2. Pagination ( infinite scroll ): Add pagination (infinite scroll) to the user list, loading additional users
as the user scrolls to the bottom.
3. Sort Users: Allow users to sort the list of users by name or email.
4. User Profile Picture: Show a placeholder image for each user (you can use a placeholder image
URL from picsum.photos or another service).
5. Submit an APK: If you submit an APK file, it will be easier for us to test your app. This is optional but
will earn you bonus points for fast testing.

SUBMISSION INSTRUCTIONS:

1. Code Submission: Submit your code in a public GitHub repository.


2. APK Submission: If possible, please provide an APK file for easier testing.
3. README: Include a README file that explains how to run the app, what features were
implemented, and any challenges you faced during development.

You might also like