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!
Top comments (4)
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.
Hi Jon. Thank you for sharing this information. I was wondering why you put
build
script in yourpackage.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 thisI met a problem when I use expo dev.
it output a error about saying not using expo go
you can use the expo-library package to create expo package dev.to/nomi9995/create-expo-librar...