In this tutorial, we'll walk through the process of building a simple todo app using React Native. React Native is a popular framework for building cross-platform mobile applications, allowing you to write code once and deploy it on both iOS and Android platforms. By the end of this tutorial, you'll have a basic understanding of React Native and be able to create your own mobile applications.
Prerequisites
Before we begin, make sure you have the following installed on your machine:
- Node.js and npm (Node Package Manager)
- React Native CLI (Command Line Interface)
- An emulator or a physical device to test the app
Step 1: Setting Up the Project
To create a new React Native project, open your terminal and run the following command:
npx react-native init TodoAppThis will create a new directory called TodoApp with the basic project structure.
Step 2: Installing Dependencies
Navigate to the project directory by running:
cd TodoAppThen, install the required dependencies by executing:
npm install react-navigation react-native-gesture-handlerThese dependencies will be used for navigation and gesture handling in our todo app.
Step 3: Creating the Todo Screen
Create a new file called TodoScreen.js inside the src directory. This file will represent the main screen of our todo app. Open TodoScreen.js and add the following code:
1// TodoScreen.js
2import React from "react";
3import { View, Text } from "react-native";
4
5const TodoScreen = () => {
6 return (
7 <View>
8 <Text>Welcome to Todo App!</Text>
9 </View>
10 );
11};
12
13export default TodoScreen;Step 4: Setting up Navigation
Next, let's set up navigation in our app. Create a new file called App.js in the project root directory, and add the following code:
1// App.js
2import React from "react";
3import { NavigationContainer } from "@react-navigation/native";
4import { createStackNavigator } from "@react-navigation/stack";
5import TodoScreen from "./src/TodoScreen";
6
7const Stack = createStackNavigator();
8
9const App = () => {
10 return (
11 <NavigationContainer>
12 <Stack.Navigator>
13 <Stack.Screen name="Todo" component={TodoScreen} />
14 </Stack.Navigator>
15 </NavigationContainer>
16 );
17};
18
19export default App;Step 5: Running the App
To run the app on your emulator or physical device, execute the following command:
npx react-native run-androidor
npx react-native run-iosMake sure you have your emulator running or your device connected before running the command.
At this point, you should see the "Welcome to Todo App!" text on the screen.
Step 6: Designing the Todo List
Now, let's design the todo list interface. Update the TodoScreen.js file with the following code:
1// TodoScreen.js
2import React from "react";
3import { View, Text, FlatList } from "react-native";
4
5const TodoScreen = () => {
6 const todos = [
7 { id: "1", text: "Buy groceries" },
8 { id: "2", text: "Walk the dog" },
9 { id: "3", text: "Finish homework" },
10 ];
11
12 return (
13 <View>
14 <Text>Welcome to Todo App!</Text>
15 <FlatList
16 data={todos}
17 keyExtractor={(item) => item.id}
18 renderItem={({ item }) => <Text>{item.text}</Text>}
19 />
20 </View>
21 );
22};
23
24export default TodoScreen;Step 7: Adding Todo Input
To allow users to add new todos, we need to add an input field and a button. Update TodoScreen.js with the following code:
1// TodoScreen.js
2import React, { useState } from "react";
3import { View, Text, FlatList, TextInput, Button } from "react-native";
4
5const TodoScreen = () => {
6 const [todo, setTodo] = useState("");
7 const [todos, setTodos] = useState([
8 { id: "1", text: "Buy groceries" },
9 { id: "2", text: "Walk the dog" },
10 { id: "3", text: "Finish homework" },
11 ]);
12
13 const handleAddTodo = () => {
14 if (todo.trim() === "") return;
15
16 const newTodo = { id: Date.now().toString(), text: todo };
17 setTodos((prevTodos) => [...prevTodos, newTodo]);
18 setTodo("");
19 };
20
21 return (
22 <View>
23 <Text>Welcome to Todo App!</Text>
24 <FlatList
25 data={todos}
26 keyExtractor={(item) => item.id}
27 renderItem={({ item }) => <Text>{item.text}</Text>}
28 />
29 <TextInput
30 placeholder="Add a todo"
31 value={todo}
32 onChangeText={(text) => setTodo(text)}
33 />
34 <Button title="Add Todo" onPress={handleAddTodo} />
35 </View>
36 );
37};
38
39export default TodoScreen;Step 8: Styling the Todo App
To improve the app's visual appearance, we can add some basic styling. Update TodoScreen.js with the following code:
1// TodoScreen.js
2import React, { useState } from "react";
3import {
4 View,
5 Text,
6 FlatList,
7 TextInput,
8 Button,
9 StyleSheet,
10} from "react-native";
11
12const TodoScreen = () => {
13 const [todo, setTodo] = useState("");
14 const [todos, setTodos] = useState([
15 { id: "1", text: "Buy groceries" },
16 { id: "2", text: "Walk the dog" },
17 { id: "3", text: "Finish homework" },
18 ]);
19
20 const handleAddTodo = () => {
21 if (todo.trim() === "") return;
22
23 const newTodo = { id: Date.now().toString(), text: todo };
24 setTodos((prevTodos) => [...prevTodos, newTodo]);
25 setTodo("");
26 };
27
28 return (
29 <View style={styles.container}>
30 <Text style={styles.title}>Welcome to Todo App!</Text>
31 <FlatList
32 data={todos}
33 keyExtractor={(item) => item.id}
34 renderItem={({ item }) => (
35 <Text style={styles.todoItem}>{item.text}</Text>
36 )}
37 />
38 <View style={styles.inputContainer}>
39 <TextInput
40 style={styles.input}
41 placeholder="Add a todo"
42 value={todo}
43 onChangeText={(text) => setTodo(text)}
44 />
45 <Button title="Add Todo" onPress={handleAddTodo} />
46 </View>
47 </View>
48 );
49};
50
51const styles = StyleSheet.create({
52 container: {
53 flex: 1,
54 padding: 16,
55 },
56 title: {
57 fontSize: 24,
58 fontWeight: "bold",
59 marginBottom: 16,
60 },
61 todoItem: {
62 fontSize: 16,
63 marginBottom: 8,
64 },
65 inputContainer: {
66 flexDirection: "row",
67
68 alignItems: "center",
69 marginTop: 16,
70 },
71 input: {
72 flex: 1,
73 marginRight: 8,
74 padding: 8,
75 borderWidth: 1,
76 borderColor: "#ccc",
77 borderRadius: 4,
78 },
79});
80
81export default TodoScreen;