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
- Open VS Code and open the terminal (you can open the terminal by pressing
Ctrl + (backtick)). - Ensure you are in your desired directory. If not, navigate to it using
cd your-directory. - Initialize a new Expo project:
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:
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
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
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:
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:
npx expo start
Additional Enhancements
-
Styling: Use
StyleSheetfrom React Native to style your components more elegantly. -
Persistent Storage: Use libraries like
@react-native-async-storage/async-storageto persist notes. - 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.
Top comments (1)
Awesome guide! Just one thing, could you provide more details on how to incorporate persistent storage for the notes? Thanks!