React Native Notes App Tutorial – Build & Deploy Fast

🚀 Important Note

🛠 This guide was generated by AI and may contain errors! Debugging and figuring out missing parts is part of the learning process. If something doesn’t work, don’t get discouraged—use it as a chance to improve your problem-solving skills! 💡 Let’s build and learn together. 🚀

🚀 Introduction

In this tutorial, we’ll build Quick Notes, a simple note-taking app using React Native. This project will teach you: ✅ UI Components in React Native ✅ Navigation using React Navigation ✅ Local Storage with AsyncStorage ✅ How to Deploy a Simple App with EAS

By the end, you’ll have a working app that lets users add, edit, delete, and save notes. Let’s get started! 🎉

Step 1: Set Up Your Project

1️⃣ Create a New Expo Project

Run the following command to initialize the project:

expo init QuickNotes

Choose "Blank (TypeScript)" when prompted.

2️⃣ Navigate into Your Project Folder

cd QuickNotes

3️⃣ Install Required Dependencies

npm install @react-navigation/native @react-navigation/stack
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context react-native-vector-icons @react-native-async-storage/async-storage

Navigation: @react-navigation/native (for moving between screens)
Local Storage: @react-native-async-storage/async-storage (for saving notes)
Icons: react-native-vector-icons (for UI enhancements)

Step 2: Implement the App

Modify App.tsx to include React Navigation:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import NoteScreen from './screens/NoteScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Note" component={NoteScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2️⃣ Create the Home Screen (List Notes)

Create screens/HomeScreen.tsx:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function HomeScreen({ navigation }) {
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    loadNotes();
  }, []);

  const loadNotes = async () => {
    const savedNotes = await AsyncStorage.getItem('notes');
    if (savedNotes) setNotes(JSON.parse(savedNotes));
  };

  return (
    <View>
      <FlatList
        data={notes}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Note', { note: item })}>
            <Text>{item.text}</Text>
          </TouchableOpacity>
        )}
      />
      <Button title="Add Note" onPress={() => navigation.navigate('Note')} />
    </View>
  );
}

3️⃣ Create the Note Screen (Edit Note)

Create screens/NoteScreen.tsx:

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function NoteScreen({ navigation, route }) {
  const [text, setText] = useState(route.params?.note?.text || '');

  const saveNote = async () => {
    let notes = JSON.parse(await AsyncStorage.getItem('notes')) || [];
    notes.push({ text });
    await AsyncStorage.setItem('notes', JSON.stringify(notes));
    navigation.goBack();
  };

  return (
    <View>
      <TextInput value={text} onChangeText={setText} placeholder="Write a note..." />
      <Button title="Save" onPress={saveNote} />
    </View>
  );
}

Step 3: Run Your App

Run the app in an emulator or on your phone:

expo start

Scan the QR code with your phone using the Expo Go app.

Step 4: Deploy with EAS

1️⃣ Build for Android

eas build --platform android

Generates an APK file for testing.

2️⃣ Build for iOS

eas build --platform ios

Requires an Apple Developer account.

What’s Next?

🎯 Now you have a working Quick Notes app! Up next:

Debugging AI-generated code: What went wrong? 🤖
Adding more features (deleting, updating, and styling notes) ✨
More game-like projects coming soon! 🚀

👉 Follow along and drop a comment with your progress!

Building "Quick Notes" - A Simple Note-Taking App in React Native