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.
