How to build an Expo Library using Native Modules

A tutorial on how to create native modules using Expo!
Follow me on Twitter 🐦 / wa2goose
Subscribe to my Insta 📷 my handle is: dan.rnlab
Sample Project: github.com/friyiajr/expo-samp...
Device:
* Android 13 Pixel 7
* iOS 16 iPhone X
=========================
00:00 Introduction
01:33 Set up the Project
06:57 Android Implementation
14:14 Android Result
14:48 iOS Implementation
17:22 iOS Result

[@dylanclements1875]

So glad someone’s made a video on this topic, I got so lost in the documentation. Thanks so much

[@jjrise]

Love your topics for videos. It’s like the practical side of RN. Keep it up!

[@ggchicote]

Thanks dan! My first approach with Native Modules. Even though I found it a bit hard - mainly the Kotlin part -, it went well. Thanks

[@nucleartux]

Thank you. Keep going!

[@brucehe9517]

Really helpful video 👏

[@manishchhetri]

Great stuff - you got a subscriber

[@nikhilranka9660]

Thanks for creating this concise tutorial. Wanted to know how simple it is to build a native UI and show it in a React Native app.

[@DanRNLab]

It’s not too bad if you use Expo Build a Native View Library with Expo, React-Native, Swift and Kotlin kzbin.info/www/bejne/mV7Xd3R6jbiWe6s

[@Forfiter9]

Hi, when i am adding a native library which is inside the project how i have to link it to the module to be able to use it?

[@uniquity4082]

How should AsyncFunction work in a Swift module? I have been trying to fetch Apple MusicKit data from a function but I get an unhandled promise rejection with Error: Received 0 arguments, but 1 was expected. The only parameter defined on the expo AsyncFunction is promse: Promise so not sure what is going on

[@dannyprudhomme]

My example folder has no other folders in it. Has anyone else had issues finding this folder?

[@edxmo2921]

Would it be possible to add android native dependencies to the expo modules? Like I don't know using a maven library along with your custom native code? Sorry if the question seems stupid, I'm just getting started into integrating native dependencies in react native projects

[@DanRNLab]

In theory it should be possible. I haven’t dug into it myself though.

[@dhananjay7513]

I have a doubt that's indirectly related to expo architecture, does Expo Module Internally use expo dev client for building project? Or if I decide to use expo module in existing project I have to add dev client as dependency, because I always get confused between dev client and expo pre build

[@Raiwulf]

how do you get your profile under tab automatically at 1:59?

[@junangameplays3271]

awesome

[@EdwinRebolledo]

Could you explain how to publish as a library on npm? please

[@AsgardMarcella]

Hello I tried to generate some numbers with Expo React Native, but the app every Time, Do you think if i create a react Native plugin in Java it will be Lighter ?

[@user-di1od1nn7w]

Great Video! Is there any way to run expo-module-scripts using windows OS

[@ahmedgameel7377]

When I try to build it using eas it fails with gradle error

[@andrzejhanusek3718]

Great content! BTW, If I would like to use this new approach and don't want to publish my modules on npm (even on private npm) do I have to use monorepo approach? Because it's not possible to keep those modules alongside app code, or I'm missing something?

[@Barthap10]

No idea why YT keeps deleting my comment

[@Barthap10]

Anyway, it is possible by creating a directory named modules in app root or configuring this in package json. You can search for expo-mega-demo GH repo - I did such thing there

[@DanRNLab]

Thanks for jumping in here @Barthap !

[@stevenmajek]

Gettting "npm install exited with non-zero code: 1" while using the following command: "npx create-expo-module my-module". Any help?

[@shazam314]

Are you using windows?

[@anseev704]

Weirdly enough, got an error saying that 'babel-plugin-module-resolver' could not be found. Fixed by installing it from within the 'example' folder with npm ('npm i babel-plugin-module-resolver'). Might be specific to me, but leaving it here just in case anyone else stumbles on the same thing.

[@vladimirvucetic243]

Do you maybe know how in kotlin to import Promise when using expo modules.import expo.modules.core.Promise? This seems not working?

[@elki_8]

How you get this project view ? I can't do this. I'm on Linux.

[@DanRNLab]

For Android the same instructions should hold. For iOS you need to use MacOS for Xcode

[@NicholasEduardo]

I was working with RN, but don’t expo. It’s not hate, but I don’t feel good working with that. Now I can change my opinion with evolution of expo and use it in production?

[@Barthap10]

You can use expo modules in a bare RN app too

[@NicholasEduardo]

@@Barthap10 thanks man

[@vladimirvucetic243]

Is it possible that you can run expo run:ios and expo run:android at the same time like when you do in rn cli. If I run react-native run-ios it start server and if I run react-native run-android they share metro instance. I can’t find if this is possible in expo and it suck to build all the time to debug on different platform?

[@DanRNLab]

They will share a metro instance if you compile both. You have to wait for one to finish building before you run the other though. Also please don’t forget the -device flag. This project only works on hardware and not simulators

[@vladimirvucetic243]

@@DanRNLab and if both are built is there command in expo to start metro like npm start in standard rn cli project?

[@DanRNLab]

You should be able to run expo start

[@vladimirvucetic243]

@@DanRNLab yes that is actually the problem I am struggling. Expo start tries to open prebuild app in expo go so basicaly I always need to run expo build:ios to run app

[@DanRNLab]

@@vladimirvucetic243 that is pretty strange, I ran this in my terminal and for me `expo start` just opens the bundler with no issues. It doesn't do prebuild or anything like that. Maybe you misconfigured something by mistake?

[@swp44744]

can you add expo native modules in existing expo app which does not have ios and android folders?

[@DanRNLab]

No, you would need to run prebuild which generates those folders for you

[@swp44744]

@@DanRNLab Thanks Dan for the quick response, what are my options if I need to use native modules in existing Expo app? btw you got a new subscriber. great work. thank you.

[@DanRNLab]

Thanks for subscribing 🙂. If you want to use native modules in an existing Expo app you can run prebuild as long as you are on a compatable version of Expo. I can’t remember if that starts on 47 or 48. If you run npx expo prebuild it generates the iOS and Android folders for you and allows you to have access to the Native Modules API.

[@swp44744]

Thank you so much Dan.