How to ship static assets with your React Native library

Vince Picone — Sat, 11 Jul 2020 20:45:23 +0000

Background

Work on React Native is moving at an incredible. Incredible, fresh features are being shipped regularly with more and more large tech companies pitching in.

One issue with the speed of this development, however, is that things change pretty rapidly. You might find conflicting answers to a problem you run into and you'll need to suss out which one is the most modern/correct solution. This is the situation I found myself in when I was trying to find the best way to ship some font files (Plex) with the component library I'm working on (Carbon).

The Solution

Create an assets (or call it whatever you like) directory with your font files/static assets the root of your project. You can also throw it under src or somewhere else, you'll just need to update the path in the next step.
Also in the root of your package add a react-native.config.js file with the following:

// react-native-config.js
module.exports = {
  dependency: {
    assets: ['assets'], // or whatever your directory is
  },
};

After installing your package, developers will just need to run npx react-native link my-special-package in the root of their project (replacing my-special-package with the name of your library). Update your docs to add this step accordingly.
React native will update the corresponding native files in their projects and allow them to be referenced accordingly.

Wrap up/caveats

This felt really clean solution and allowed me to keep working on my package. The dependent package I used was generated using @react-native-community/cli, I haven't experimented with an expo package just yet.

I'd love to here how other folks have dealt with this or other React Native problems.

Resources

react-native-community/bob Essential tool for packaging React Native modules for publishing
React Native — Monorepos & Code Sharing Great medium article for setting up React Native in a monorepo
react-native-vector-icons Awesome library that loads assets in a variety of ways. They need to support older React Native versions, so you'll see a few different techniques employed to load their fonts.

DEV Community: Vince Picone

How to ship static assets with your React Native library

Background

The Solution

Wrap up/caveats

Resources