By Vishal Basumatary in javascript — Mar 24, 2023

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-navigation

Step 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;

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.