Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 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
Available Formats
Download as PDF, TXT or read online on Scribd
9 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
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