Using external packages in React Native

React Native provides a set of built-in core components. While it provides you with a lot of components and APIs, you will eventually need to add something to the app that it's not included in the core.

This is where you will reach for an external package.

Choosing packages

As with other JS packages, you will download them from NPM (Node Package Manager). There are two types of NPM packages that you will typically install in the app:

• JS packages, these include just JavaScript code and are not tied to any Web API and DOM. This includes packages like moment, dayjs, uuid.
• React Native packages, these usually include native implementation (iOS, Android) and an JavaScript interface to call the methods on the native side. This includes packages like expo-location, react-navigation, and @stripe/stripe-react-native.

React Native packages

Expo SDK libraries

Expo packages are our first choice, since they are updated regularly and proven to work with Expo projects. You can install them with expo install expo-location, which will ensure the installed version is compatible with the project.

Expo packages (+ some additional third-party packages) that are part of the Expo SDK do not require any additional setup and work out of the box with the Expo Go application.

Third-party React Native packages

Other React Native packages can be installed with the help of the expo-dev-client package. The expo-dev-client package is used to create a development build. This will support you to be able to install any package and will create a "modified version of Expo Go", which includes the native part of your third-party packages.

The best way to build the dev client is with the Expo Application Services (EAS), which are cloud services for Expo and React Native apps, from the team behind Expo. We will take a look at how to create a development build in the next steps.

Expo Dev Client

To initialize a development build, you need to install the expo-dev-client package. You can do this by running npx expo install expo-dev-client inside the project directory.

If you want to follow along with the code example, you can clone the repo.

Checkout to the branch 4-external-packages-start and install the packages (yarn / npm install).

We'll also need an EAS CLI tool, which can be installed with npm install -g eas-cli@5.4.0. You can create a free Expo account and log in to the CLI with eas login. EAS CLI tool will provide us with a command to trigger a remote build on EAS or do it locally.

To describe the type of build we'll need to add an eas.json configuration file to the root of the project.

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    }
  }
}

We added a development profile where we described the kind of build we wanted to do. This will be a build for a development client (expo-dev-client), the distribution is internal so it produces files that can be installed on simulators/devices. For iOS we added one more line saying this is a simulator build, so it produces an .app file that we can install on the simulator.

You can build the development client ("modified version of Expo Go") on their EAS service and then download the APK / IPA and install it in the simulator/emulator. This works great, but with the free plan, it could happen that you will need to wait in a queue for a build. Alternatively, you can also use the EAS command, but run it locally with the --local flag. You will need to have the development environment setup.

Run the development client build with:

eas build development (this will trigger a remote EAS build with the development profile) or

locally with eas build -p ios development --local (iOS) and eas build -p android development --local

Challenge

Choose another external package (can be an Expo or a third-party one), add it to the app and practice generating your development build.

Resources

Expo Development builds: https://docs.expo.dev/develop/development-builds/introduction/

EAS CLI: https://github.com/expo/eas-cli