https://github.com/rohit-nandagawali/todo-app-react-native
This is a Todo app created using React Native that allows users to manage their tasks and keep track of their progress. The app uses the concept of states and props to update the UI in real-time based on user interactions. It also utilizes various components such as StatusBar, TouchableOpacity, and KeyboardAvoidingView to enhance the UX
https://github.com/rohit-nandagawali/todo-app-react-native
mobile-development react react-native
Last synced: 4 months ago
JSON representation
This is a Todo app created using React Native that allows users to manage their tasks and keep track of their progress. The app uses the concept of states and props to update the UI in real-time based on user interactions. It also utilizes various components such as StatusBar, TouchableOpacity, and KeyboardAvoidingView to enhance the UX
- Host: GitHub
- URL: https://github.com/rohit-nandagawali/todo-app-react-native
- Owner: Rohit-Nandagawali
- Created: 2023-02-22T13:26:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T15:14:07.000Z (over 2 years ago)
- Last Synced: 2025-01-10T21:41:47.877Z (6 months ago)
- Topics: mobile-development, react, react-native
- Language: Java
- Homepage:
- Size: 262 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TODO App
## 📱 About the App
This is a Todo app created using React Native that allows users to manage their tasks and keep track of their progress. The app uses the concept of states and props to update the UI in real-time based on user interactions. It also utilizes various components such as StatusBar, TouchableOpacity, and KeyboardAvoidingView to enhance the user experience. The app is styled to give it an appealing and modern look.
## Demo
https://user-images.githubusercontent.com/85486891/220661657-5ad49681-0243-4e41-af52-5deda99711eb.mp4
## 📜 Components Used
- #### StatusBar:
It is a component that allows users to customize the status bar at the top of their device's screen. It can be used to change the background color, text color, and other settings of the status bar.
- #### TouchableOpacity:
This component provides touchable feedback to the user when a button is pressed. It can be used to perform various actions such as navigation, data submission, and more.
- #### KeyboardAvoidingView:
This component helps to avoid the keyboard overlapping with the text inputs. It automatically adjusts the UI based on the position of the keyboard, making it easier for users to enter their data.
## 📝 Splice Method
The app also uses the splice method to update the state of the task list. This method allows users to remove or add items to the task list based on their interactions. It is a powerful method that can be used to modify the contents of an array without changing its length.
## 🎨 Styling
The app is styled using a combination of custom CSS and React Native's built-in styling properties. The colors used are vibrant and appealing to the eye, making it easy for users to identify different elements in the UI.
## Installation
### 👨💻 Cloning and Running the Project
To clone this project, follow these steps:
#### 1️ - Open the command prompt and navigate to the desired directory
#### 2️ - Run the command:
```bash
git clone https://github.com/Rohit-Nandagawali/todo-app-react-native.git
```
#### 3 - Navigate to the project folder and run the command:
```bash
npm install
```
#### 4 - Once the installation is complete, run the command:
```bash
npx react-native run-android
```
OR
```bash
npx react-native run-ios
```
depending on your device
#### 👍 That's it! You have successfully cloned and run the Todo app.
## Authors
- [@Rohit-Nandagawali](https://www.github.com/Rohit-Nandagawali)
## Made with ❤