How to Create a Basic Notes App using React Native and Expo
Tags: javascript, androiddev, webdev, android
Published: 2024-06-17 18:30:06

Using `create-expo-app` simplifies the setup process for a React Native project. Expo provides a managed workflow that handles many of the complex configuration steps for you. Let's build a note-taking app using Expo.

### Step 1: Set Up Your Project

1. Open VS Code and open the terminal (you can open the terminal by pressing `Ctrl + (backtick)`).
2. Ensure you are in your desired directory. If not, navigate to it using `cd your-directory`.
3. Initialize a new Expo project:

```bash
npx create-expo-app NotesApp
cd NotesApp
```

### Step 2: Install Dependencies

We'll use React Navigation for navigating between screens. Run the following commands in the terminal to install the necessary packages:

```bash
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
```

### Step 3: Create Screens

In the `src` folder, create a directory named `screens`. Inside the `screens` directory, create two files: `HomeScreen.js` and `NoteScreen.js`.

#### HomeScreen.js

```javascript
import React, { useState } from 'react';
import { View, Text, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  const [notes, setNotes] = useState([]);

  const addNote = () => {
    navigation.navigate('Note', {
      saveNote: (note) => setNotes([...notes, note]),
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Add Note" onPress={addNote} />
      <FlatList
        data={notes}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.note}>
            <Text>{item}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  note: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
});

export default HomeScreen;
```

#### NoteScreen.js

```javascript
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const NoteScreen = ({ route, navigation }) => {
  const [note, setNote] = useState('');

  const saveNote = () => {
    route.params.saveNote(note);
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter note"
        value={note}
        onChangeText={setNote}
      />
      <Button title="Save Note" onPress={saveNote} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 20,
    paddingLeft: 10,
  },
});

export default NoteScreen;
```

### Step 4: Set Up Navigation

Modify the `App.js` file to set up the navigation:

```javascript
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './src/screens/HomeScreen';
import NoteScreen from './src/screens/NoteScreen';

const Stack = createNativeStackNavigator();

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

export default App;
```

### Step 5: Run the Application

Finally, run your application:

```bash
npx expo start
```

### Additional Enhancements

1. **Styling**: Use `StyleSheet` from React Native to style your components more elegantly.
2. **Persistent Storage**: Use libraries like `@react-native-async-storage/async-storage` to persist notes.
3. **Editing Notes**: Implement functionality to edit and delete notes.

This setup provides you with a basic note-taking app using Expo. You can further enhance it by adding more features like note categorization, search functionality, or synchronization with a backend service.