How to create React Native/Expo npm packages

Developing npm modules that work with Expo is different from the traditional flow that you can use with a regular 'ol React project. Usually in a React project, you could create a module inside a folder on your computer, then run yarn link inside it and proceed to link it inside your testing playground.

Expo is powered by React Native, which uses a bundler to bundle your app's dependencies. This prevents yarn link from working as usual.

To develop a package, there are two different strategies depending on what you need to do. You might need to create the contents of the package, or you might need to verify it works as an import in real project.

Creating the contents of the package

Create a testing app with expo init. Inside it, create a folder named your-package-name, with in an index.tsx file inside. The file structure should look like:

testing-app/
  your-package-name/
    index.tsx
    ...
  App.tsx
  ...

Inside App.tsx, you can now import Foo from './your-package-name', and develop it just like a regular component --that's because this is the exact same as creating a regular component. By doing this, you get the awesome dev-experience/fast-reload of Expo.

Testing the package as a dependency

When the package is in a spot that is complete, you are ready to test it as an import into a real project. We're going to do this without publishing it to npm or using a tool like yalc.

In another spot on your computer, create a folder named after your package: your-package-name. Inside it, copy over all the files that make up your package. Then, run expo init example to create an example folder inside your package folder, like this:

your-package-name
  example/
    ...[expo app here]
  index.tsx
  ...

To install the package in the example Expo app you just made, cd into the parent your-package-name directory, and run npm pack.

This will package up your module into a .tgz file. When you run the command, the last line of output will tell you the file name that it just saved (it should look like: your-package-name-version.tgz). Copy it, then cd back into the example folder and run yarn add [your-copied-name].tgz and your package will be installed as a dependency. Inside the Example, you can now import it with import Foo from 'your-package-name'.

Now you can create an example that will test your package within an app, and if you commit it to GitHub, others can also see a working example of your package too.

Once your package is in a good spot, follow with your npm publish flow.

To see an example of an Expo compatible project with an example folder, check out my react-native-fade package.

Happy package-ing!

Comments

[indavidjool]

I get this when I try to run on expo web:

Module parse failed: Unexpected token (12:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Still trying to figure out which steps I need to add to make it work for web.

[nonamelol]

Hi Jon. Thank you for sharing this information. I was wondering why you put build script in your package.json. I tried to do the same but it didn't work out for me. To be clear, typescript didn't output the compiled files. I would be really glad if you could explain this

[Weykon]

I met a problem when I use expo dev.

it output a error about saying not using expo go

[Numan]

you can use the expo-library package to create expo package dev.to/nomi9995/create-expo-librar...