Building a Todo App with React Native

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:

1. Node.js and npm (Node Package Manager)
2. React Native CLI (Command Line Interface)
3. 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 TodoApp

This will create a new directory called TodoApp with the basic project structure.

Step 2: Installing Dependencies

Navigate to the project directory by running:

cd TodoApp

Then, install the required dependencies by executing:

npm install react-navigation react-native-gesture-handler

These 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:

// TodoScreen.js
import React from "react";
import { View, Text } from "react-native";

const TodoScreen = () => {
  return (
    <View>
      <Text>Welcome to Todo App!</Text>
    </View>
  );
};

export 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:

// App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import TodoScreen from "./src/TodoScreen";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Todo" component={TodoScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export 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-android

or

npx react-native run-ios

Make 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:

// TodoScreen.js
import React from "react";
import { View, Text, FlatList } from "react-native";

const TodoScreen = () => {
  const todos = [
    { id: "1", text: "Buy groceries" },
    { id: "2", text: "Walk the dog" },
    { id: "3", text: "Finish homework" },
  ];

  return (
    <View>
      <Text>Welcome to Todo App!</Text>
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text>{item.text}</Text>}
      />
    </View>
  );
};

export 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:

// TodoScreen.js
import React, { useState } from "react";
import { View, Text, FlatList, TextInput, Button } from "react-native";

const TodoScreen = () => {
  const [todo, setTodo] = useState("");
  const [todos, setTodos] = useState([
    { id: "1", text: "Buy groceries" },
    { id: "2", text: "Walk the dog" },
    { id: "3", text: "Finish homework" },
  ]);

  const handleAddTodo = () => {
    if (todo.trim() === "") return;

    const newTodo = { id: Date.now().toString(), text: todo };
    setTodos((prevTodos) => [...prevTodos, newTodo]);
    setTodo("");
  };

  return (
    <View>
      <Text>Welcome to Todo App!</Text>
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text>{item.text}</Text>}
      />
      <TextInput
        placeholder="Add a todo"
        value={todo}
        onChangeText={(text) => setTodo(text)}
      />
      <Button title="Add Todo" onPress={handleAddTodo} />
    </View>
  );
};

export 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:

// TodoScreen.js
import React, { useState } from "react";
import {
  View,
  Text,
  FlatList,
  TextInput,
  Button,
  StyleSheet,
} from "react-native";

const TodoScreen = () => {
  const [todo, setTodo] = useState("");
  const [todos, setTodos] = useState([
    { id: "1", text: "Buy groceries" },
    { id: "2", text: "Walk the dog" },
    { id: "3", text: "Finish homework" },
  ]);

  const handleAddTodo = () => {
    if (todo.trim() === "") return;

    const newTodo = { id: Date.now().toString(), text: todo };
    setTodos((prevTodos) => [...prevTodos, newTodo]);
    setTodo("");
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to Todo App!</Text>
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text style={styles.todoItem}>{item.text}</Text>
        )}
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add a todo"
          value={todo}
          onChangeText={(text) => setTodo(text)}
        />
        <Button title="Add Todo" onPress={handleAddTodo} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 16,
  },
  todoItem: {
    fontSize: 16,
    marginBottom: 8,
  },
  inputContainer: {
    flexDirection: "row",

    alignItems: "center",
    marginTop: 16,
  },
  input: {
    flex: 1,
    marginRight: 8,
    padding: 8,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4,
  },
});

export default TodoScreen;

Congratulations! You have successfully built a todo app using React Native. In this tutorial, we covered the basics of React Native, navigation, state management, and basic styling. Feel free to enhance the app by adding features like editing and deleting todos, or customizing the design further. Happy coding!