How to Create a Basic Notes App using React Native ?
In this article, we’ll walk you through the process of building a basic notes app using React Native. The application enables users to effortlessly create, edit, and delete notes, providing an uncomplicated yet impactful introduction to React Native’s mobile app development capabilities.
Prerequisites:
- Introduction to React Native
- Introduction React Native Components
- React Native State
- React Native Props
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to install & configure React Native:
Steps to Create React Native Application:
Step 1: Create a react native application by using this command:
npx create-expo-app basicNotes-app
Step 2: After creating your project folder, i.e. basicNotes-app, use the following command to navigate to it:
cd basicNotes-app
Project Structure:
Approach:
This code snippet in React Native allows you to build a simple notes app effortlessly. It effectively manages the state using useState, enabling you to handle note data, editing functionality, and modal visibility smoothly. The app’s interface presents a scrollable list of notes, each featuring a title. By utilizing modals with title and content inputs, users can easily add, edit, and delete notes.
Example:
Step 3: Open App.js file, open it and paste the source code into it.
Javascript
import React, { useState } from "react" ; import { View, Text, TextInput, Button, ScrollView, TouchableOpacity, Modal, StyleSheet, } from "react-native" ; const App = () => { // State variables // Array to store notes const [notes, setNotes] = useState([]); // Selected note for editing const [selectedNote, setSelectedNote] = useState( null ); // Note title const [title, setTitle] = useState( "" ); // Note content const [content, setContent] = useState( "" ); // Modal visibility state const [modalVisible, setModalVisible] = useState( false ); // Function to handle saving a note const handleSaveNote = () => { if (selectedNote) { // If a note is selected, update it const updatedNotes = notes.map((note) => note.id === selectedNote.id ? { ...note, title, content } : note ); setNotes(updatedNotes); setSelectedNote( null ); } else { // If no note is selected, add a new note const newNote = { id: Date.now(), title, content, }; setNotes([...notes, newNote]); } setTitle( "" ); setContent( "" ); setModalVisible( false ); }; // Function to handle editing a note const handleEditNote = (note) => { setSelectedNote(note); setTitle(note.title); setContent(note.content); setModalVisible( true ); }; // Function to handle deleting a note const handleDeleteNote = (note) => { const updatedNotes = notes.filter( (item) => item.id !== note.id ); setNotes(updatedNotes); setSelectedNote( null ); setModalVisible( false ); }; return ( <View style={styles.container}> { /* Title */ } <Text style={styles.title}>My Notes</Text> { /* List of notes */ } <ScrollView style={styles.noteList}> {notes.map((note) => ( <TouchableOpacity key={note.id} onPress={() => handleEditNote(note)} > <Text style={styles.noteTitle}> {note.title} </Text> </TouchableOpacity> ))} </ScrollView> { /* Add Note button */ } <TouchableOpacity style={styles.addButton} onPress={() => { setTitle( "" ); setContent( "" ); setModalVisible( true ); }} > <Text style={styles.addButtonText}> Add Note </Text> </TouchableOpacity> { /* Modal for creating/editing notes */ } <Modal visible={modalVisible} animationType= "slide" transparent={ false } > <View style={styles.modalContainer}> { /* Note title input */ } <TextInput style={styles.input} placeholder= "Enter note title" value={title} onChangeText={setTitle} /> { /* Note content input */ } <TextInput style={styles.contentInput} multiline placeholder= "Enter note content" value={content} onChangeText={setContent} /> { /* Buttons for saving, canceling, and deleting */ } <View style={styles.buttonContainer}> <Button title= "Save" onPress={handleSaveNote} color= "#007BFF" /> <Button title= "Cancel" onPress={() => setModalVisible( false ) } color= "#FF3B30" /> {selectedNote && ( <Button title= "Delete" onPress={() => handleDeleteNote( selectedNote ) } color= "#FF9500" /> )} </View> </View> </Modal> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 40, backgroundColor: "#e6e6e6" , }, title: { fontSize: 24, fontWeight: "bold" , marginBottom: 10, color: "#333" , }, noteList: { flex: 1, }, noteTitle: { fontSize: 15, marginBottom: 10, fontWeight: "bold" , color: "black" , backgroundColor: "white" , height: 40, width: "100%" , padding: 10, borderRadius: 8, }, addButton: { alignItems: "center" , justifyContent: "center" , backgroundColor: "#007BFF" , paddingVertical: 12, borderRadius: 5, marginTop: 10, }, addButtonText: { color: "white" , fontSize: 16, fontWeight: "bold" , }, modalContainer: { flex: 1, padding: 50, backgroundColor: "white" , }, input: { borderWidth: 1, borderColor: "#E0E0E0" , padding: 10, marginBottom: 10, borderRadius: 5, }, contentInput: { borderWidth: 1, borderColor: "#E0E0E0" , padding: 10, marginBottom: 20, borderRadius: 5, height: 150, textAlignVertical: "top" , }, buttonContainer: { flexDirection: "row" , justifyContent: "space-between" , }, }); export default App; |
Step 4: Go to the Terminal and type the following command to run the react native application.
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output: