Using Expo and Realm with expo-dev-client
Tags: reactnative, expo, realm, react
Published: 2022-03-04 12:10:24

---
title: Using Expo and Realm with expo-dev-client
published: true
description: Now we can write our React Native Expo Apps using Realm and use a custom-dev-client to get most of the functionality of Expo Go, in just one simple step.
canonical_url: https://www.mongodb.com/developer/how-to/using-expo-realm-expo-dev-client/
tags: reactnative, expo, realm, react
cover_image: https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/OG_Realm_Expo_c32095c252.png
---

In our last post on [how to build an offline-first React Native mobile app with Expo and Realm](https://www.mongodb.com/developer/how-to/build-offline-first-react-native-mobile-app-with-expo-and-realm/), we talked [about a limitation of using Realm and Expo](https://www.mongodb.com/developer/how-to/build-offline-first-react-native-mobile-app-with-expo-and-realm/#prebuilding-our-expo-app) where we stated that Realm is not compatible with Expo-managed workflows. Well, wait no more, because now Expo works with Realm and we have a nice [custom development client](https://blog.expo.dev/introducing-custom-development-clients-5a2c79a9ddf8) that will have roughly the same functionality as Expo Go.


## Creating a React Native app using Expo and Realm in one simple step

Yes, it sounds like clickbait, but it's true. If you want to build a full application that uses TypeScript, just type in your terminal:

```bash 
npx expo-cli init ReactRealmTSTemplateApp -t @realm/expo-template-js
```

If you'd rather do JavaScript, just type:

```bash
npx expo-cli init ReactRealmJSTemplateApp -t @realm/expo-template-js
```
 

After either of these two, change to the directory containing the project that has just been created and start the iOS or Android app:

```bash
cd ReactRealmJSTemplateApp
yarn android
```

Or

```bash
cd ReactRealmJSTemplateApp
yarn ios
``` 

This will create a [prebuilt](https://github.com/expo/fyi/blob/main/prebuilding.md) Expo app. That is, you'll see `ios` and `android` folders in your project and this won't be a managed Expo app, where all the native details are hidden and Expo takes care of everything. Having said that, you don't need to go into the `ios` or `android` folders unless you need to add some native code in Swift or Kotlin.

Once launched, the app will ask to open in `ReactRealmJSTemplateApp`, not in Expo Go. This means we're running this nice, custom, dev client that will bring us most of the Expo Go experience while also working with Realm.

We can install our app and use it using `yarn ios/android`. If we want to start the dev-client to develop, we can also use `yarn start`.


## Adding our own code

This template is a quick way to start with Realm, so it includes all code you'll need to write your own Realm application:

* It adds the versions of Expo (^44.0.6), React Native (0.64.3), and Realm (^10.13.0) that work together.
* It also adds `expo-dev-client` and `@realm/react` packages, to make the custom development client part work.
* Finally, in `app`, you'll find sample code to create your own model object, initialize a connection with Realm Sync, save and fetch data, etc.

But I want to reuse the [Read it Later - Maybe app](https://github.com/mongodb-developer/read-it-later-maybe) I wrote for the last post on [Expo and Realm](https://www.mongodb.com/developer/how-to/build-offline-first-react-native-mobile-app-with-expo-and-realm/). Well, I just need to delete all JavaScript files inside `app`, copy over all my code from that App, and that's all. Now my old app's code will work with this custom dev client!


## Putting our new custom development client to work

Showing the debug menu is explained in the [React Native debug documentation](https://reactnative.dev/docs/debugging), but you just need to:

> Use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on macOS, and Ctrl+M on Windows and Linux.


| Android Debug Menu    | iOS Debug Menu     |
|:--------------:|:-----------:|
| ![Read it Later app running, with the debug menu showing up](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/expo_dev_client_1_android_dev_menu_2c76540036.png) | ![Read it Later app running, with the debug menu showing up](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/expo_dev_client_2_ios_dev_menu_2b8810ebf7.png) | 


As this is an Expo app, we can also show the Expo menu by just pressing `m` from terminal while our app is running.
  
![Terminal showing debug menu. At the back, there's an iOS simulator, showing the Expo debug menu after pressing `m`.](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/expo_dev_client_3_2efa2adb43.png)

## Now do Hermes and react-native-reanimated
The [Realm React Native SDK](https://docs.mongodb.com/realm/sdk/react-native/) has a [`hermes`](https://github.com/realm/realm-js/tree/hermes) branch that is indeed compatible with Hermes. So, it'll work with `react-native-reanimated` v2 but not with Expo, due to the React Native version the Expo SDK is pinned to. 

So, right now, you have to choose: 
* Have Expo + Realm working out of the box. 
* Or start your app using Realm + Hermes (not using Expo).

Both the Expo team and the Realm JavaScript SDK teams are working hard to make everything work together, and we'll update you with a new post in the future on using React Native Reanimated + Expo + Hermes + Realm (when all required dependencies are in place).

## Recap

In this post, we've shown how simple it is now to create a React Native application that uses Expo + Realm. This still won't work with Hermes, but watch this space as Realm is already compatible with it!

## One more thing

Our community has also started to leverage our new capabilities here. Watch this video from Aaron Saunders explaining [how to use MongoDB Realm + Expo building a React Native app](https://www.youtube.com/watch?v=5BwIpiC2H4E&ab_channel=AaronSaunders).

And, as always, you can hang out in our [Community Forums](https://www.mongodb.com/community/forums/tag/react-native) and ask questions (and get answers) about your React Native development with Expo, Realm and MongoDB.