Expo + React Native: What is the "right way" to wrap a 3rd party native library?

Question

What is the "right way" to wrap a 3rd party native library (android and ios) and expose it to Javascript in an Expo + React Native project? What is the best route to pursue? Are there any comprehensive examples I should study?

Here are some things I've tried doing to execute simple native code without any 3rd party dependencies involved:

• Vanilla React Native app (npx react-native init AwesomeProject) + Turbo Module = Success
• Vanilla Expo app (npx create-expo-app AwesomeProject) + Turbo Module = Failure
• Vanilla Expo app (npx create-expo-app AwesomeProject) + Vanilla Expo module (npx create-expo-module AwesomeModule) = Success

Since I want to use Expo, the 3rd options seems like a great route for me to take. But now I'm stumped on how to actually pull in the 3rd party library I want to use. For example, in awesome-module/ios there is a AwesomeModule.podspec file, but no Podfile to add a dependency to. Should I add a Podfile? Should I add a dependency to AwesomeApp's Podfile? Am I taking the wrong approach? Should I re-focus on a React Native Module?

Resources I've used so far:

• Expo Modules API and related articles in that section.
• Studied the "example" app generated by npx create-expo-module AwesomeModule
• Turbo Native Modules and Prerequisites for Applications

Answer 1

With Expo you have two main workflows - the managed work-flow and the bare work-flow. See here for the documentation on these workflows.

In the past the only option for including 3rd party libraries was to eject your Expo project (Which is a one-way operation - no going back) so that it became a standard React Native application and then include the 3rd party libraries that you need in your React Native project. The reason for this was that the managed work-flow used Expo Go on the device to provide the required native functionality and there was no way to add 3rd party libraries to Expo Go. So what Expo provided is what you could use.

This has subsequently changed, and there now is a way to include 3rd party libraries. You do this by making use of EAS build to build your own custom development client (which then replaces Expo Go on your android or iOS device). It took me a while to figure out how all of this works, but the steps in a nutshell are the following:

1. Do an expo prebuild to prebuild the iOS and Android folders. In the iOS folder you will then find the Podfile that you were looking for. You can make changes that you need to in the Android or iOS folder and running the EAS build will not overwrite the changes that you make here.

2. If you made any changes to the Podfile for iOS, you need to execute npx pod-install in the iOS folder.

3. Create an EAS account and then use one of the following commands to build your project:

   eas build --profile development --platform android

   eas build --profile development --platform ios

The above commands will start the build on the EAS server, after sitting in a queue for while (the length of the queue depends on the time of day and how busy the server is).

The iOS build command will prompt you for your Apple account and will guide you through creating and provisioning profiles for your test devices.

If an error occurs during the build, you will have to log into your EAS account and view the logs to see the error message reported.

Once the EAS build completes, you will be given a QR code which you can then scan on your Android or iOS device to install your custom development client.

Once the custom development client is installed you can then launch your application, which now includes your 3rd party library, by running the following from your project folder:

npx expo start --dev-client

You will then be given a QR code that you can then scan on your mobile device, and your application will then launch inside your custom development client.

It is also possible to setup your own Windows machine to do the EAS build for Android if you do not want to use the EAS server. If you have a Macbook you can set it up to do the EAS build for Android and iOS. A lot of dependencies need to be installed to setup your machine to do an EAS build, though. Here is the documentation for setting up you Windows PC or Macbook to do EAS builds. (Note that a Windows PC cannot build for iOS as Xcode is required).

If you want to do the EAS build locally, then add --local to the EAS build commands given above.