Conditionally Loading Native Modules in Expo

I used to be a 'plain' React Native guy, but I've really grown to enjoy using Expo for the last few apps I've built.

Much less compile errors to deal with, and I really love using the Expo Go app to quickly debug an app without having to wait for a development build to finish or opening Xcode.

Of course, some apps need custom packages with native functionality that isn't available in Expo Go. Depending on what type of functionality they offer, they might be optional for debugging.

Recently, I had to use the Intercom SDK in an app. Their React Native package is great, but it doesn't work with Expo Go, since it relies on their native iOS and Android SDKs.

As soon as you import it in your code anywhere, your app will crash if you try to open it in Expo Go. Annoying, especially since I don't really need the Intercom functionality to debug my app.

The solution? Conditionally import it, based on whether the native module exists:

import { Linking, NativeModules, Platform } from "react-native";

export const getIntercom = async () => {
  if (!NativeModules.IntercomEventEmitter) {
    console.log("Intercom SDK not available");
    return null;
  }

  const { default: Intercom } = await import("@intercom/intercom-react-native");
  return Intercom;
};

Now we have the best of both worlds – I can still debug all of the other app functionality in Expo Go, but in a native build, the Intercom SDK loads correctly.

Anywhere I want to call any of the Intercom SDK methods, I'd just do:

const intercom = await getIntercom();
intercom?.presentMessageComposer();