Notes Application in React Native Part 1

Cover Image for Notes Application in React Native Part 1
Rajeshkumar S
Rajeshkumar S
about 1 month ago
appmobiledevelopmentandroidReact Nativenotesapplication

Introduction

In this tutorial, we will build a notes application in React Native. This application will allow users to add, view, and organize their notes seamlessly. We will use React Native to build the mobile application.

Prerequisites

Before we get started, make sure you have the following installed:

  • Node.js
  • npm
  • React Native CLI

Getting Started

To create a new React Native project, run the following command:

npx react-native init NotesApp

This will create a new React Native project called NotesApp. Navigate to the project directory and start the development server:

cd NotesApp
npx react-native start

Next, run the following command to start the application on an Android emulator or device:

npx react-native run-android

This will launch the application on the Android emulator or device. You should see the default React Native welcome screen.

Building the Notes Application

Now that we have set up the project, let's start building the notes application. We will create a simple interface that allows users to add, view, and organize their notes.

Creating the Note Component

The folder structure of the project should look like this:

NotesApp
    node_modules
    src
      list.tsx
      types.d.ts
    App.tsx
    package.json
    tsconfig.json

First, let's create a new file called types.d.ts in the src directory to define the types used in the application.

types.d.ts
export type NotesI = {
  id: number,
  title: string,
};

Then, let's start by editing the App.tsx file to create the Note component. This component will represent a single note in the application.

App.tsx
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { useState } from "react";
import ListData from "./src/list";
import { NotesI } from "./src/types.d";
 
const App = () => {
  const [notesList, setNotesList] = useState<NotesI[]>([]);
  const [newNotes, setNewNotes] = useState<string>("");
 
  const onHandlePress = () => {
    setNotesList((prev: NotesI[]) => [
      ...prev,
      {
        id: notesList?.length + 1,
        title: newNotes,
      },
    ]);
 
    setNewNotes("");
  };
 
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Notes Application</Text>
      <TextInput
        onChangeText={setNewNotes}
        value={newNotes}
        placeholder="Enter the notes title"
        style={styles.input}
      />
      <TouchableOpacity
        disabled={Boolean(!newNotes)}
        style={styles.button}
        onPress={onHandlePress}
      >
        <Text style={styles.buttonText}>Add Notes</Text>
      </TouchableOpacity>
      <View style={{ paddingTop: 20 }}>
        <ListData data={notesList} />
      </View>
    </SafeAreaView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 6,
    marginHorizontal: 20,
    marginTop: 40,
  },
  title: {
    textAlign: "center",
    fontSize: 20,
    fontWeight: "600",
    color: "blue",
  },
  input: {
    borderColor: "gray",
    borderWidth: 2,
    borderRadius: 6,
    minHeight: 40,
    paddingLeft: 10,
    fontSize: 15,
    marginVertical: 10,
  },
  button: {
    backgroundColor: "blue",
    paddingVertical: 10,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 6,
  },
  buttonText: { color: "white" },
});
 
export default App;

In the above code, we have created the Note component, which consists of a text input field to enter the note title and a button to add the note to the list. We are using the useState hook to manage the state of the notes list and the new note title.

Creating the List Component

Next, let's create the list.tsx file in the src directory to display the list of notes.

list.tsx
import React from "react";
import { FlatList, View, Text, StyleSheet } from "react-native";
import { NotesI } from "./types.d";
 
const ListData = ({ data }: { data: NotesI[] }) => {
  if (!data || data.length <= 0) {
    return (
      <View>
        <Text style={styles.noData}>No data found :-)</Text>
      </View>
    );
  }
 
  const renderItem = ({ item }: { item: NotesI }) => (
    <View style={styles.card}>
      <Text style={{ color: "white", fontSize: 16 }}>{item.title}</Text>
    </View>
  );
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Task List</Text>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: { paddingVertical: 20 },
  title: {
    textAlign: "center",
    fontSize: 20,
    fontWeight: "600",
    color: "blue",
  },
  card: {
    backgroundColor: "gray",
    paddingVertical: 10,
    borderRadius: 6,
    paddingHorizontal: 6,
    marginVertical: 10,
  },
  noData: {
    textAlign: "center",
  },
});
export default React.memo(ListData);

In the above code, we have created the ListData component, which displays the list of notes. If there are no notes in the list, it will display a message indicating that no data is found. We are using the FlatList component to render the list of notes.

Conclusion

In this tutorial, we built a notes application in React Native. We created a simple interface that allows users to add, view, and organize their notes. We used React Native to build the mobile application and managed the state using the useState hook. In the next part, we will add more features to the notes application, such as editing and deleting notes.