Working Realm + React Navigator Example
- Published
- Reading time
- 3 min read
- Length
- 478 words
On this page
Working Realm + React Navigator Example#
When it comes to building mobile apps that require local storage, Realm is a great database option for React Native developers. In addition, React Navigation is an excellent library to use for managing navigation in your React Native applications. In this post, I will provide a working example of how to integrate Realm with React Navigation in a React Native app.
Step 1: Install Dependencies#
First, we need to install Realm and React Navigation packages in our project. We can do this by running the following commands in our terminal:
npm install --save realm react-navigationStep 2: Create Realm Schema#
Next, we need to create a schema for our Realm database. In this example, we will create a simple schema with a single object and two properties: "id" and "name". We can create the schema in a separate file called "schema.js".
Here is an example of how the schema.js file would look like:
import Realm from 'realm';
class Person extends Realm.Object {}
Person.schema = {
name: 'Person',
primaryKey: 'id',
properties: {
id: 'int',
name: 'string',
},
};
export default new Realm({ schema: [Person] });Step 3: Create Screens#
Now, we need to create screens for our app using React Navigation. In this example, we will create two screens: "HomeScreen" and "DetailsScreen". We can create these screens in separate files called "HomeScreen.js" and "DetailsScreen.js".
Here is an example of how the HomeScreen.js file would look like:
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Realm from '../schema';
const HomeScreen = ({ navigation }) => {
const [persons, setPersons] = useState([]);
const fetchPersons = () => {
const allPersons = Realm.objects('Person');
setPersons(allPersons);
};
return (
<View>
<Text>Home Screen</Text>
<Button title="Fetch Persons" onPress={fetchPersons} />
{persons.map((person) => (
<Text key={person.id}>{person.name}</Text>
))}
<Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
</View>
);
};
export default HomeScreen;Here is an example of how the DetailsScreen.js file would look like:
import React from 'react';
import { View, Text } from 'react-native';
const DetailsScreen = () => {
return (
<View>
<Text>Details Screen</Text>
</View>
);
};
export default DetailsScreen;Step 4: Add Routes to Navigation Stack#
Finally, we need to add our screens to the navigation stack using React Navigation. We can do this in a separate file called "App.js".
Here is an example of how the App.js file would look like:
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;And that's it! Now, we have a working example of how to integrate Realm with React Navigation in a React Native app. Of course, this is just a simple example, and you can customize it to fit your specific needs.