https://github.com/codedbystuart/reactnativetodoapp
This is a React Native Project built with Expo to test developers basic understanding of the core concepts of React Native.
https://github.com/codedbystuart/reactnativetodoapp
Last synced: about 2 months ago
JSON representation
This is a React Native Project built with Expo to test developers basic understanding of the core concepts of React Native.
- Host: GitHub
- URL: https://github.com/codedbystuart/reactnativetodoapp
- Owner: codedbystuart
- Created: 2024-12-09T14:08:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-10T07:26:43.000Z (over 1 year ago)
- Last Synced: 2025-01-13T14:51:52.685Z (over 1 year ago)
- Language: TypeScript
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native To-Do List App Test
## Objective
Using the project preset for you, Create a React Native app that integrates with a real-world API. The app should allow users to fetch a list of tasks from a remote server, display them, and manage the tasks locally by adding, updating, and deleting tasks. This test evaluates your ability to work with React Native components, manage state, handle API calls, and style the application.
---
## Requirements
Your assignment will be handled in the file `app/(tabs)/index.tsx`
Use the following public API to fetch a list of tasks:
GET https://jsonplaceholder.typicode.com/todos
### Core Features:
1. Display the fetched list of tasks in a `Flatlist`.
2. Allow users to add a new task locally (does not need to persist on the server) using an input field and a button.
3. Each task in the list should have a delete button to remove it.
4. Use `FlatList` to render the tasks.
5. Handle errors gracefully when fetching tasks (e.g., display an error message if the API call fails).
6. Pagination: Load tasks in batches of 20 from the API, fetching more as the user scrolls.
7. Add a second screen using React Navigation to show more details about a task when a user taps on it.
### Styling:
- Center the input field and button at the top of the screen.
- Style task items with borders, padding, and margin to ensure the app looks organized.
### State Management:
- Use React's `useState` hook to manage the list of tasks.
## Setup Instructions
1. **Initialize the Project:**
```bash
cd TodoApp
npm install
npm start