Let’s build a Native Library using Expo Modules

what's up noj developers welcome back to our new live stream today we're going to learn about Expo modules and we're going to build a native libraries for rec native using Expo modules API today we're going to learn about what are Expo modules what are native libraries why do we need them how to create how to understand the concepts behind them and later in the video we are actually going to get our hands dirty and Implement some native libraries including native modules for some functionalities native views to render something natively on the screen and also some libraries that wrap around some pre-existing native libraries for Android and iOS but before we do that um let's quickly have an overview of how re native works and that will help us understand uh why do we need these um Expo modules first of all let's go back to how Rec native works so Rec native even though we are writing our user interface using JavaScript this might give a impression to some people that this is not native but let's focus on the native part of re native because in fact all the JavaScript components that we are using they are simple wrappers around some native components in in most cases for example when we are rendering a text component from react native that is a simple wrapper around an Android native text View and an iOS UI text View and that's similar to the rest of the components that we are using um most of them are actually transform or they are um a Gateway towards the native or the platform View and functionalities and here I want to mention that there are um the things that we see on the screens these are usually called native views because we are rendering and we are viewing them but there are also uh libraries that do do not render anything for example the location library that one is not a native view that is a simple native module so here I want to make this distinction to help you understand better later when we're going to um talk about Native modules and Native views so um yeah behind the scenes Rec native is transforming them to a Android native text or image depending on what you're rendering and on iOS to an iOS text or image uh when we're building applications um we we are usually start we we can use a lot of native views provided by the Rea native itself together with Native modules um sometimes we need more functionalities and in that situations we can go ahead and use a lot of pre-build or a lot of modules that are supported and uh maintained by Expo such as Expo camera for example uh Expo has a lot of uh packages and libraries and if uh you cannot find something NE in Native or Expo in that case you go ahead and look for something that is maintained uh by the Community some open source projects for example the vision camera is an example of this kind of uh open- Source library that provides you with Native functionalities uh but in even in that case sometimes uh you might need very custom uh very custom native code for your application and in that case you need to basically uh drop down to the native platform and write some code for the native platform and make it available to your JavaScript side to the r native side in that case uh we have to build native modules um re native has a native modules um system um we have a new architecture we're called turbo native modules and for the views they are fabric native components uh but we are actually going to look at the expo at the system that is designed by Expo for building native modules and here I'm talking about Expo modules API um so yeah uh that was a little bit of introduction and now we're are going to go ahead and go through the documentation of Expo modules API and uh get our hands dirty and practice learn everything by doing by trying uh to build some Expo native modules and here I would like to mention a quick disclaimer this is actually the first time that I'm going to get my hands on the Expo modules API so it's going to be a learning process both for me and for yourself we're going to follow the documentation I'm going to provide a little bit more context of how I understand these things uh but uh most probably there will be some uh some challenges because I don't have a lot of experience with Native uh code cotlin Swift UI so it's going to be um challenging but an interesting I expect it to be an interesting and valuable for you uh video that we can follow together and learn based on Expo modules documentation if you're ready think we can get started but before that let me uh quickly say hello to everyone who are joining us live how are you doing guys hello Ariel hello adtia Jack Graham infant hello Vladimir can I mbook M3 handle the development that you do definitely I even I don't have a mcbook uh an M3 M2 Pro can handle IOS and Android simulators work at the same time I'm pretty sure it can all right so let's go ahead and let's start going through the documentation so what are export modules as I explaining they allow us to write um to extend the capabilities of our application and write custom native code that helps us tap into the native platform API so from design consideration the Expo modules API they are using Swift for iOS and cotlin for Android I don't have experience with neither of them but I don't think that's going to be a challenge in any case sometimes we can simply use chbt we go through cotl and swi documentation um to to find out more about that uh and based on the r native New architecture the only thing that we need to be aware of is that Expo modules API they are um render agnostic meaning that uh they renderer agnostic meaning that an expo module API will work both on the new architecture that is using the fabric renderer and on the old architecture that is using paper renderer um if that doesn't ring a lot of bells don't worry um that basically means that if we build an expo module API it's going to work in both scenarios in both situations and here here it uh mentions about the the native views I'm not exactly sure about Native modules uh but yeah we're going to see it today so let's go ahead and getting started so uh the thing is that there are two ways to uh to to create an expo module um we can either initialize a module inside an existing uh application where we can uh uh no I was where is come on go back get started yeah there are two recommended flows we can either add a new module to an existing Expo application so for example you're building your application at some point you need to write some custom code you can uh create a local native modules and dive deeper into that native code uh or the second approach would be to create a new module module an isolated module and then import it in your application in that case this is this solution is great like if you need the same module in multiple projects or if you also intend to publish it and open source it and in this documentation we we we see how we can uh add new modules to an existing application and the only thing that we have to do is uh use the Des D local we are going to actually start doing that in a moment but I think I'm going to skip the get started and go into a tutorial right away here let's just uh see what what we have to work with um and creating a a module as a separate compo as a separate project uh we simply call the same method without D- local so uh here yeah is just a simple get started guide but I would like to go into the first tutorial called create a native module and follow this documentation to create my actual first Native modules so in this tutorial we're going to build a native module that stores the user preferred application theme either dark light or system for that we are uh we're going to use the user defaults which on iOS is a the system to to store um to store some data and this is for iOS and share preferences for Android that is also used to store these kind of preferences so uh the tutorial doesn't uh show how to implement it on web but we can also add web support by using local storage so yeah okay that's good let's go ahead and start by initializing the module uh for that we're going to use the npx create Expo module Expo setting so let's go ahead in our terminal navigate where you keep your project and let's paste this code I think I also like to always use the at latest because the first time you're going to use the create Expo module that is going to install the latest version but later it might use a cached version so I always like to add the add lat when using npx uh it asks me to install the create Expo module because I don't have it yet let's press yes and it's going to create a module called Expo settings when we should use native modules uh good question we should use native modules when uh we need to extend the capabilities of our application and we depend on some platform specific apis usually uh as I said I never needed actually like when building application to to to drop down to the native side because in most cases I find some open source packages uh and I'd rather use them but sometimes the application has very specific needs and in that case maybe an open source package is not something that you need or doesn't fulfill all the requirements of your project and in that case you might need to build it yourself some very basic example that that you can think of is let's say you need to to work with maps uh in R native you can go ahead and use rack native Maps but if you need something more specific maybe you would you would write a custom native code that would integrate on iOS with their native maps on Android with their native maps and on them the functionalities there on the native side or some cryptography or let's say something that uh is a or another you another very common use case is when you find the library that you need but it's a native library for Android and you find a similar one for iOS what you can do is create a native module mod that would wrap around these two libraries for IOS and Android and expose this their functionality to uh react native that is also another use case that that you might need to write a native module anyway uh going back we are asked what is the name of the npm package let's go with export settings uh what is the native module name Expo settings I'm going to leave everything like this because I don't intend to publish it anywhere so think the the the the defaults will be okay for me now we are waiting to install everything and then we're going to Simply open it in Visual Studio code and look through the the files that it was generated there okay something didn't work I guess which is not very which is not a very good start not sure what happened but anyway I'm going to open the Expo settings the project I'm going to open it in Visual Studio code and let me check here what happened I would guess that it worked correctly but uh to to double check that I will open a new terminal and I would go ahead and write npm install again to make sure that we install all the packages again and I see that doesn't seem to be present in your log file add it under home page entry in the package Json export module script exist not updating homepage so it says something but no and I'm seeing something like yarn install why did it assume I'm using YN but which package internal workspace let's try to do remove node modules and also the package lock file to reinstall the the the packages from scratch here after that is done I can do clear and I will try again an npm install if that doesn't work I'm going to try with yarn these are just warnings so far so good and no it doesn't want internal something this package does seem to be present in here yarn install they don't even understand which package this one Let's uh try that with yarn again removing uh node modules and package. lock and when yarn install let's see if that is going to to change anything okay with yarn it worked maybe it even worked with with npm and I should have just continued but anyway let's continue with yarn if it wants it this way so let's have a look at a couple of files that it was it generated uh we have a source directory and this is the uh source file of our Expo module uh because we developed our module separate like as an independent project outside of an expo application it also gave us an example application that we can run to test out our native module so in ab. TSX it's uh as we can see it's actually importing the Expo settings which is our custom native modules that we generate at here and it's calling this hello function I think I I would like to actually try to run this uh application to see it working in then continue um continue uh editing it based on our needs so to run it what I have to do is first I have to run the build command inside the root directory and because we are using yarn for some reason I'm going to go and run yarn build in the root directory didn't want to do that oh why package that in the package if I check here in the script build is going to be Expo module build and why you didn't want to do it is it because I'm using no ja version 20 sometimes that can also be the problem I know that it's not recommended to mix and match yarn and npm but let's I'm just going to push for it you know export module command not found yeah boy it's not very exciting uh beginning but that's let me check the documentation uh King is asking when you see native module are we building a library for react native or native things like codling and Swift we are building a library for rack native but it's a native Library so we're going to write some cotlin Co code that is going to be executed when we run our R native application on Android and we're going to write some Swift Code uh that is going to be run on iOS when our react native application is uh running on iOS devices so we are building a Rea native Native Library um yeah I'm also thinking maybe uh the problem was something about uh node version so NVM uh NVM uh what would be change uh NVM change node version would it be use NVM use I think it was even like NVM all as default version 18 let's try 18 and now node version It's again 20 but if I'm going to close and open the terminal I mean close it completely and open it again and do node version that's going to be 18 so let's see if on 18 it's going to work should I try with YN build uh Expo mod not found let's go ahead and try to I'm going to remove some folders here to try back um to try back the npm install npm install would really love to to continue with npm should we use Expo for apps like Instagram oh you deleted there please work let's go okay the comment is back should we use Expo for apps like Instagram or in that case better going to be us native C to avoid potential problem what potential problem um I always recommend going with Expo nowadays uh because there are no potential problems maybe in the past oh and when I using the correct the the version 18 at this moment uh of no GS everything work with npm so let's write now try the npm build command uh unnown build npm run build npm run build uh okay everything good our library is being built basically the types script side is being built and did it finish no compilation I think it was buil because and in it's watching like if we're going to change something it's going to rebuild it uh but now it's time to go ahead and go into the example folder and this is a example of Expo application let's do CD example and here we're going to have to run with this uh application on iOS to do that we're going to use npx Expo is it correct yes npx Expo run iOS and this will build we should build and run we project on iOS but I don't see in the example the package. J Json that's that's very true it's probably it should take it from here Expo let me go back to get started and check the second this one npm run open Android should I be here and using this package prare open iOS okay let's do npm run open iOS from the root of our module folder that will probably trigger and open this uh application in xcode it's not going to run it yet but it's going to open it in xcode and the file example iOS does not exist come on okay let's nuke this one try from scratch from the get started let's go to creating a new module with an example project let's start with this NP npx create export module my module my example folder is incorrect for some reason it was not correct right yeah it should contain IOS and Android folders as well as the source thank you rockas uh I don't know why that happened maybe it was because previously I had the node 20 and it gave me some errors let's try right now with I'm reusing the same uh terminal so most H wait a second wait a second this terminal is also using node version 20 so i' have to restart it let's do it now create Expo module my module uh Target directory yes it's not empty uh yeah because I already have something there so let me go ahead and do I'm going to remove both of them to clean the folder where I'm working in now we can try again I'm going to go with all the defaults I'm going is saying I work on an Enterprise application when the application starts there are more than 208 pack calls in Sag and multiple Redux store dispatches and the just Fred drops to minus two to the two FPS for two three seconds create a video managing sag and Redux um to be honest I I don't have a lot of experience with s Redux so I'm not sure how good of a tutorial I'm going to do and I'm not very excited about these uh Technologies to to dive into them and and learn them I remember the oldest version of Expo has been awful for application that have native modules well probably like four years ago uh there were some itations when it came to Expo applications and Native modules because if you needed native modules back then for years ago just to uh to explain that uh what you had to do is basically eject out of Expo and continue using recognitive CLI nowadays there Expo developed the Expo modules and a lot of tools that would that allows you to write native uh native code code so anytime you are installing a library for example that has native code um in that case yes you cannot use Expo go but you can simply create a development client which is basically a custom Expo go Application that contains all the necessary native code that your application depends on so there is no um limitations nowadays for Expo and a lot of things are much easier to manage maintain and update so that's why I always recommend it uh but my application my uh module has been initialized yeah initialized let's go ahead and open it in Visual Studio code and now if I look at the example okay now this looks like a a proper Expo application uh that is used to to Showcase or to test our module that we initialize with name my module that's why let's go ahead and in the root uh let's go ahead and build npm run build uh and then let's go ahead and open the iOS project I'm not even sure that I need to to open it in um yeah um we can go ahead and do npm run open iOS npm run open iOS and this will go ahead and uh start X code with a example iOS directory let's see if xcode is starting come on xcode here it is here is xode xcode and if we look under the example project there will be probably libraries no my module example and this is the code for that module right maybe I don't know what we can do is we can run it from here from xhol but we can also go ahead and do CD example and from the example folder we can do npx Expo run iOS and this will run it from our terminal without us having to open xode at all and we're going to be able to do the same for Android we're going to do that in a second should I try to do it at the same time in a different terminal let's see if my uh PC will hold it let's go into the example again and using npx Expo let's run this example application on Android if you're working on um Windows you not going to be able to test and run it on iOS so that's something to keep in mind on a m OS you have access to both Android and iOS simulators I'm going to keep Android here out of the screen but when it uh finish finishes building I'm going to show it to you native here means cotland Swift right not C++ or rust yeah you when building expo modules uh using Expo modules API we are using cotlin and Swift correct is it good to memorize W flatlist and call backs uh in rack native applications um it's good to do that only for the ones that has to be memorized or or the ones that are expensive because if you memorize everything that's also not the best approach because um memorizing something you are exchanging uh time for memory so you're going to your application is going to use way more memory just to keep track of everything that you memorized and in a lot of components they take less time to be rendered uh than uh being always being checked like with a memorized value so that's why uh I'd rather recommend having a look at and trying to understand what are the problematic views or components that are uh very heavy on rendering maybe simplify them and only memorize things that um that take a lot of performance to to reender let's say so it looks like today we're going to to do a lot of waiting for Native side things to to be built maybe we're going to try to do most of things in one single project not to create new new stuff over and over again for but while that is happening maybe we can go ahead and look at some of the code that we have for this template of a module so if we open the sour directory uh starting from index.ts this is a typescript file what does it have here oh come on for the native modules on the web it will be resolved to my module web okay on Native platform to my module. ts my module. ts this one so this is kind of the interface of our module that expose typescript or let's say JavaScript functions that are uh mapped to the module functions uh the our application has the example application has finished building for iOS so let's press here open and as we can see this is a uh custom development build because um if you're working with Expo you know about Expo go and in a lot of cases we are using Expo go the thing is that now we are in our example project we are using n custom native code when we have custom native code we no longer can use Expo go because Expo go has a has limited set of native code and libraries that most application needs but whenever we have custom native code we simply create a development client and our application now already has the iOS directory and the Android directory that if we build and run as you can see they they are being open in a completely separate application my module example uh it's very similar to expoo but it's your custom version of expoo so you can also like interact like reload and so on uh if we look at the app. TSX of our example application the text that we see here this text is actually coming from the module the custom module that we have built that we have initialized and we are importing this module in our reative example application and we are calling a function hello this function hello returns a string so on iOS it returns this string that's the same is going to happen on Android but I see that for Android what did it fail don't tell me Android uh plugin required Java to run you're currently using Java 11 okay that probably is going to give me some headaches um but I can try to do to go back back in the rot directory and do npm npm run open Android maybe for Android Studio is going to allow me to update my Android I don't even remember what is the problem there but some Android um yeah trust the project I don't remember when is the last time I was indirect with Droid studio so okay so I have to update my jdk version anyone experience with how would that the Java version what the the process of updating it where was the the error I lost the error should I just ignore Android but that's not the point the point is to to test it and to show it both on Android and iOS so in the environment set up let's see the development environment for rec native CLI for ma OS and Android what we need is Java development kit that we can install using this command so let's let's try that and hopefully we are not going to break anything so starting with this command and then uh Mario is asking the estimated release date of a premium course uh we don't have the estimated date yet but I'm working very hard on on the project actually we have already I have already the three projects ready for two and a half ready for the for the course where is it so yeah I'm working on a huge course focused on Rec native and Expo applications and the course is going to teach all of these Concepts together with r fundamentals rack native fundamentals styling exper outter of course Expo workflows with custom development clients and platform API networking to get data and manage it um setting up all the environment and basically learning everything about re native and Export to build applications of course we are doing that through uh through projects so the course is going to contain around seven projects three of them I already have ready I just have to to finish like um the the the most challenging part about building course is to to structure the information in a in a natural way so that you start small and as you build application you learn new things you add to your workflow uh at the same time not having like huge jumps in complexity because at that time um students will will find difficult and challenges and also you don't want to repeat a lot of stuff so you need to carefully craft all of these projects uh to make sure that they are increasing in complexity and they would be um valuable for beginners but at the same time uh avilable to people who already have experience and they want to uh to get to the next level so that's why the first two are more like fundamentals and then we get into uh really uh advanced stuff uh so yeah that's where I'm currently at we we are working hard on it and we are probably going to have like the wait list open quite soon so that's going to be the first step to make sure that you guys can join the weit list if you are interested let me know in the comments if you would be interested in uh in these course and if I see a lot of people I'm going to rush the team to to have a weight list page as soon as possible up and running when it will be releasing uh it's going to be this year uh but I don't have a lot of details yet Let's uh let's continue with with messing up with our environment so what I want you to do is I want you to install this uh the next command in the rec native environment setup documentation uh oh that's nice how do I know what version do I currently have Java version it's 11 so very very old I need to to be on 17 but yeah um that's power of using like Expo on this like really in a lot of cases we don't need to to get down to this low level where like let's say native side is not actually low level I never liked very much with Native side especially for Android oh it's so it's installing Zulo let me do that okay it was installed successfully then we can take the the install puff using that command where is [Music] it it here is it this one to double click the installer okay I need to double click the installer what two files from here which one is the installer first one so I just took the the URL that I saw here the puff to to where it was installed and I did open in that puff to open it in uh in my files and from here I'm going to d double click the installer I'm going to go ahead and install it let's go and after you install the jdk update your Java home environment variable if you use the above steps jdk will be at this hopefully it will let me check if that's true if I do LS yeah I see that there is this kind of puff uh and now to update the Java home um probably that would be in my zsh HR here somewhere Source where is Android home Android home but I need the Java home so the question is where is my Java home environment variable oh I didn't have to do anything and uh it was updated and if I open a new terminal and do Java version it's 17 so I hope it worked I cannot be sure but I'll just continue let's give it a try to install for to build for Android again uh where I am shouldn't be here it should be in the project directory then we're going to go into the example Java version is 17 that means that we can do npm run npx Expo run Android this will build and should try to run the application on Android emulator maybe even my Android Studio is outdated that's also possible so far so good I'm going to close come on now as you can see my module is being built and yeah let's uh let's what see okay I'm going to wait hopefully it's not going to take more a lot of time I'm going to wait just to see everything on Android and then we're going to go through the files and see what's going on there thanks for helping guys in the in the comments appreciate that very close for for okay so I see application finished building for Android and now it's BND link and in a second we should see all right so all good and now we have our basic hello world native module running uh both for iOS and on Android as well okay uh as we saw uh now let's go ahead and look into some files uh to understand what do we have there uh to know where we are going to work to to to change the our native Library so starting with the index. in the source that's the source code of our native module here um it's importing the native module on the web it will be simply resoled to this my module web which simply exports a constant a function set value and the hello function so three things Pi set value and hello that means that if we go into our example if we go into the app. TSX we saw how we can take hello but we should also be able to say that the pi value is I believe my module. Pi okay as you can see uh we can access like variables we can access functions and there is also one more function there okay let's go back to the index native platforms to my module. ts so on web is going to be resolved to this function on Native Android and iOS is going to be resolved to this uh uh to this file this file uh is using a mathod require native module from Expo module core and based on the comment uh this function basically is uh handling the the changes between the old and new architecture so it's going to load either the GSI if it's running on New architecture or if there is no JSI it's going to fall back to the bridge module from the all architecture so it's a simple wrapper around um a wrapper that is exposing our module for both old and new architecture what else we have a types these are probably yeah the types script types that uh help us um provide the like the type safety to our native module and this is something very important and in the past with the old architecture world native modules that was uh a source of a lot of errors and what else we have a native View and that's it uh but where is the code for actually like the native code because we we only have like this code the code for the native package I think is part of iOS somewhere there and Android also there for that reason we for that reason we can go ahead and write npm run open Android maybe I'm going to do open iOS just let let's try to change like what is being rendered on iOS compared to uh to Android and here in xcode do you know how to to zoom it in okay but code I can zoom but the user interface I cannot it's a bit bad uh we have here my module example and we have a pods where is going to be yeah I think under the pods there is development pods and there should be the my module yes there is the folder my module and here we have a the F the file my module and the my module View if I look into the my module file that should be our native code for our module I I I hope that that's the right place where we should edit it anyone knows if you should edit the code through the pods directory for example I see here the function hello uh so let's do Hello World from iOS save and and I would have to what rebuild I would have to [Music] do CD uh example npm run npx Expo run iOS yeah that's correct thankk you lemon kush for some reason I stopped this one but now it rebuild much faster than the first time and I think yeah we see Hello World from IOS on Android that should be the same hello world here if I will reload Lo it should still be hello world we can do the same changes for Android by opening our uh project in Android Studio so for that we're going to run npm run open Android let's see how we can do changes in Android as well uh I need to rebuild uh I think that that by doing npx Expo run I West Vos rebuilding no build succeeded so yeah like after doing the changes there we need to rebuild it now here is the Android how to do the changes on Android on Android is it project is it pack packages maybe under packages we have module project files extensions nope I found it under the actual example application s m and so one and then I found the modules and then I found the main activity and the main application is this where it's happening or no I don't think it's here up SCE main up SCE main yeah my module example obligation s Main finding files hello world it's not here okay let's look for for documentation running the example open Android open and okay you can run the example project on your device when the project runs you will see Hello World on the screen making change a change on Android open my module in Android Studio here command o and I don't find it for some reason my module maybe I'm not looking at the right project you know let me try to do it again npm run open Android and here let's try to do command o and my module cannot find it is this a problem um is Rie outdated maybe my uh Android Studio is outdated to be honest how how long will it take should I search invest code uh invest code it should be under Android probably application uh application Source main Java Main main activ no this are the main activity let's search here my module do cotlin it's under Android Source main Java Expo module my module oh it's in the okay it's in the root Android not in the example Android Root Android that's right right because the example is just the example of a project and the same thing for iOS it's this iOS that is being changed okay and Android here in my module um it doesn't properly show the cotlin code but I can find here hello and I can do Hello World from Android and if I for example example I'm going to go ahead and download in the background uh Android Studio but probably I'm going to also be able to run this without it by going ahead in CD example and doing npx expor run Android this will rebuild my Android example project and it should come on where is it should be here but that's uh that's the the first learning the native code for our package leaves under the iOS directory here and for Android it's here under the Android in the example that's the example project that is being that is using this this native module that we are building so here hello world from Android here is Hello World from IOS that basically means that we successfully uh are using a native module in our react native application we are simply calling the hello fun function and letting the code that was written for the platform manage and return the necessary string that's uh that's the power of R native because with this uh we can dive or we can access like a specific code on the native platforms and even at the moment that's simply returning a string so that's not it doesn't necessarily have to be on the native side it can be simply with a platform check from Rec native side but uh that means that it opens the doors for us to to interact with platform apis or with uh Native libraries on Android and iOS so okay uh that was a quite a rough start but uh but that that was actually expected like every time I have to work with with Native side it's it's rough but that's part of a process and part of a learning uh part of a learning process so let's continue and what we are going to do is we're going to go ahead to the back to the Expo documentation and in the getting started guide we understood like what we have to do for Android like when we have to change things we modify the my module the cotlin file there and for iOS the my module Swift if we add new name files we need to reinstall the pods using pod install inside the example directory or we have to rebuild the application and we should see the changes okay perfect let's go ahead to the first tutorial create a native module so in this tutorial we're going to build a native module that stores a preferred application theme dark or light or system and for iOS we're going to use user defaults for Android share preferences uh I'm not going to initialize a new module I'm going to continue most of the stuff to do here because it takes a bit of time to to create a new module to build it so I'm going to use the same one so it's not going to be called Expo settings in my case is going to be called my module uh so first step is to clean up the default module a little bit so we have more more of a clean slate and uh yeah so what we have to delete is from the iOS folder the uh the view. Swift so from IOS we need the my modu view. Swift let's remove it because our module right now is not going to have any native view we're going to get to that in the next step but first is going to be simple native module not a native View uh okay for Android we need to uh from Android we need also the view. cotlin to remove so let's open Android Source Java and the my module view. cotlin let's deleted again we don't need a view at this moment from The Source uh we're also going to delete the view. TSX and the and the settings types andit types view web and so let's go step by step we are going to delete the view. TSX from The Source let's open the source and let's uh do the view. TSX this one we're going to delete we don't need it uh similar to the one for the web View . web. TSX we don't need it uh and we need to change delete the the types right Expo settings types types. TS we don't need it why and the web module as well so this one as well so we are left with only two files in the source the index and my module hopefully I deleted only the files that I have to delete but let's continue Now find the following file and replace them with a uh provided minimal boiler plate uh in the iOS for the Expo setting module Swift let's get this boiler plate this is Swift Code uh we can do that here by going to iOS my module Swift and I'm going to replace this with this one uh and in my case the name of my module is my module so make sure to updated here the same thing to with the name that we specified inside here so it should be my module uh this is one way to to change that another way would be to open it uh doing npm open iOS and if we open the iOS go to the pods and we go here and do some changes here some changes they would automatically be updated here we see some changes and in some cases of the you're going to get battery intellisense um working with swift inside uh xcode okay uh so we created the name of module my module and we Define a function called get F that will return a string and this is the value that we return nice we should do the same with the Android side so let's copy this boiler plate and let's go into the Android Source Java my module cotlin and here I'm going to remove everything and paste the the minimal boiler plate again let me update from Expo settings module to my module uh similar here for the name in our module definition we're going to call it my module this is very important because that's how we are accessing it this by this name and we Define a function here in cotlin called get theme that will return the the the word system the the string system again uh here I don't have cotlin even highlight highlighting for cotlin syntax so it would be better to do open Android but in my case have a older version of Android Studio so I'm not sure if it if it will work for me my module yeah I don't know what's happening here so meanwhile in the background I'm going to upgrade Android studio and uh we are going to we're going to use we're going to update like the cotlin file for for visual studio code okay so we have like this minimal module that has only one function called get theme and and we implemented it both on Android using the cotlin file file and iOS using the Swift file now it's time to to integrate it on the on the JavaScript or expose it to the to the JavaScript side we're going to do that in the source index.ts let's copy this code and let's go to the source index. TX and out of everything that we have here this is going to be the minimal uh code let's make sure we are using the correct name my module my module and here my module. getet fim so here we are exposing to the JavaScript side a function get fim that will call the get fim function on the native side module perfect so last step is to go into the app our example application our example application app. TSX and our module will no longer have this py and the typescript already knows about that and it will no longer have this hello what it will have is the get theme so yeah we're going to say that the theme is going to be my module getf function okay let's go ahead and run the example project I think we we have to rebuild it but I have it here so probably it's rebuilding automatically because it's watching for files it doesn't have any errors and the last is 32 yeah it was rebuilt just now uh come on uh yeah let's then go into the I into the example directory I'm already here and let's do npx Expo run iOS for example and in another folder I'm going to do it again for run Android something went wrong uh for Android it went wrong and for iOS it also did you forget to declare this file as an output of a script phase in the my module from Project project boards what so for I for example should I try to um pre build it again the example or should I try to do pod install okay and let's try the in run iOS again because we updated some files in the our custom module hello everyone I just arrived is this live made for developers wanting to create a react native component Library uh I wouldn't I wouldn't put a lot of expectation on this live stream because during this live stream I myself am learning about uh Native modules but yeah using the Expo modules you can build component libraries if you want to have them native component libraries because you can have also component libraries on the JavaScript side and yes uh now as we can see uh our my module. get theme is returning us the hardcoded string system that we have wrote Under the iOS my module. Swift here for the getf function we said return simply system and for Android uh for Android what happened for on Android there probably it should also be I'm not sure how to let's try again npx exp for on Android for iOS I just simply uh reinstall pods for Android I'm not sure what is the process Veer build failed Expo my module my module class where is that Android Source Java my module uh I will try to do the following I'm going to do npx Expo prebuild and this will uh regenerate in the example it will regenerate Android and iOS folder and maybe that will will take the new updates that I have done and after that npx X run Android that will actually build and use it so let's see or maybe I have a typo Danielle is saying currently I'm watching your eight hour long Expo course it's awesome thank you very much I appreciate that so what I'm doing wrong here cannot find my module. class oh Expo I think package this the package Expo modules settings o what was that one before so I'm going to do a contrl z a bit uh the package was export. module. my module I think that's very important so I'm going to leave a class here I'm going to remove everything that is inside the class I'm going to take a little bit different approach and now I'm going to go to the clean example here for cotlin is this the cotlin file yes and only add the the comp the things inside the class because I want to keep the same name I want to keep the same package uh package name as we can see this is important and here in the name should also be my module function get fim simply return system okay I think now it's going to work uh let's try to do npx exp onun Android okay it's opening on Android let's see if it works on Android as well what we expect is also theme system because we are we have hardcoded on the native side on the cotlin side that the function get F will return the string system that was for us just to get started but the next step in our module is to actually um get set and persist the theme on the native side so for I uh to read the values on iOS we can look for the user default string Under the key theme and fall back to system and there is isn't any so what you do is you would go ahead and look at the user defaults in Swift documentation you're going to open the documentation I don't even know how the documentation for iOS looks but this user default with a default of a system uh we can store default objects we can read default objects so I'm not going to give go a lot into details here because that's not my area of expertise so I'm going to Simply follow the documentation the tutorial from expo here to set the value we are going to use the user defaults do set method uh to update that that field so that means that inside our Swift file of our module when we want to set the theme we are going to call this one when we want to read the theme we're going to call this one okay so let's copy these two functions and go ahead in our iOS directory my module Swift and replace the existing get fim with the two functions that we just copied uh I think that's the Ben benefit of uh of working on the Swift file in xcode because it will show that the user defaults is not imported so if for example we would go ahead and open where is X code here user defaults do we need to import it no we don't need to import it actually so again when we will call a function set fim from our JavaScript side if application is running on iOS this function on the Swift on this Swift function on the iOS side is going to be called and this function is using the user default default class from uh from IOS and is writing the theme that we have sent from the JavaScript side it's writing it in the user default for the key theme now when we try to read that theme it's using the same user default but this time it's reading stuff so it's reading the key uh the value for the key theme if there is nothing it f falls back to the system Let's uh we have to do the same for our Android site so Android my module cotlin instead of hardcoding the get fim to return system we need to read it and on Android that is going to happen using the shared preferences so the same logic but what we have to do here oh it's a lot so we need to import uh Android context share preferences right what do we currently have here module and module definition so we need only the context and share preferences on top let's do that here then uh we have two function the set theme that is using get preferences which is a function that we Define below put string oh my God Android is always a mess so I'm not even going to try to understand it I'm going to copy these two functions I'm going to put them into my module definition so these are the set fim function and the get fim function but we also have in our class we also have Define the context and a function called get preferences so that should be our after our definition method like here inside our class context when we call get context so that was on Android on um on Android now it's time to Define these two functions get F and set fim on our uh JavaScript side or better say on the typescript for that we're going to go into the source index and here we only expose the get theme function so if for example we're going to go into the example right now and uh we're going to try to call my module my module dot set fim we see that it's not here because we did even though we created these functions on the native side we didn't create them on our typescript side so similar to how we have here get theme I'm not even going to look there let's think how to do it for example we're going to have a set theme function that will get the theme as a string it will return void or maybe nothing and we'll call my module dot set theme and here we'll send this theme from here is that correct set f f fim string and their return is void maybe we can be more specific void to avoid oh you see that's the problem shouldn't be return or should it be a return now in the example application in the example application we can use this uh new methods from that my module uh for example we can have some a text change theme to and then we're going to have free text box to uh light we're going to have one for dark and another text for system so we have change F to light dark and system when we call when we press on this light on press I want to Simply call my module do set theme with a value light is it light yes the same thing when we press on the next in a way button when we on the next one it's going to be dark and lastly when we press on the system we're going to set the F to system okay I Tred to press it and it said that set f is not a function why even though we created we need to rebuild the example project to to start using them so uh I'm going to stop my execution VI and uh the best way is going to probably be uh rebuilding or pre-building our project using npx Expo pre-build that will uh update the IOS and Android direct directory of the example and then we can do npx Expo run iOS to run this project on iOS same thing for Android npx export on Android okay then emitting changes all right Hello friends so the application have been rebuilt here so if I press we see that the theme currently is system both on Android and iOS if on iOS I'm going to press on light nothing changes but if I reload my application we see that the theme updates to light similarly if I press on dark and then reload it's updated to dark and on Android L test if I press light and reload it's updated to light dark reload dark and the same thing with system so that's good that's the first step uh and our F doesn't um update in real time or it doesn't listen to updates because uh we are calling this get theme uh we're calling this get theme when the application renders so that's why we have to do this uh reload but that's going to be our next steps to send events from the Native side to our react native and to listen on the react native to this updates and update some values so that's going to be the next step imit changes change events for the theme value but give me one second I'm going to be back and we will [Music] continue e okay so uh coming back to to this when something happens on the native side we would want to somehow update and make sure that we can change things on the r native side on the on the JavaScript side uh so to do that we can use events to describe what events our module can imit and then we will call the send event uh function to send this event from the Native side from the Native side from Swift and cotlin and then on the JavaScript side we will subscribe to this events so we're going to start with the iOS native side the changes that we have to do is we need to define the event that can be sent events on change theme that's the first step so going to iOS my module after the name we have to define the events on change f um when we call this function set F let's send an event called on change theme and send the updated F there so this is only defining wave vent and here is triggering wave vent so we trigger wave event when we call the user default set and theme okay that's on the I side now on the Android native side events payload are represented as a b bundle instance on Android which we can create using bundle of function again on the there we will Define the events at the top so let's go Android Source Java my module after the name let's define it here events on change fim now in the set F function we want to uh trigger that event we're going to do that using this send event so in the set theme after we added the preferences we're going to use Expo settings module No it should be my module do send event so this is the name of a module class then send event on change fee which we declared here and the values inside that is going to be theme with a value that we set it currently let's check if we need to change anything else I don't see that so probably that's it now on the typescript side on the typescript side we need to Define an event Emer and a type that will contain the the payload or the data that that event is going to send so let's go to the source index TSX at the top start by defining VC meter and we will uh import it event meter from Expo modules script is it Expo modu no Expo modules core export modules core uh eventer my module now here we Define a typescript type to specify what values our theme change event will send and is going to send an object where we will have a theme now we will create a function called add theme listener this is going to be the way or the function that we will call from the JavaScript side to subscribe to this events add listener we're going to we expect a listener function and when something happens in V event meter we're going to call the listener that is going to be received here we're going to see that in one second uh yeah in to better understand this F listener we're going to go back in our example application and see how we can use this event listener on our rack native side so in the example up. TSX what we want to do is we want to subscribe to events to when the theme has changed for that we're going to use a use effect to subscribe to changes when this component mounts so for that we need the use effect with empty depend a list uh then we're going to do we have to call on my module we have to call add theme listener here we need to provide the listener so the listener is going to be a call back function like what function should we call when the event is emitted we can simply do a console log event and check what happens there uh I'm going to goe and rebuild because the rest of the changes are going to happen on the rec native side so they'll be easier to manage so to for our event that we wrote on the native side to take effect we're going to have to pre-build the application again to update the IOS and Android directory and we're going to do run iOS and run Android to rebuild the native side project for Android something didn't work for iOS it worked so for iOS we are going to if when our application mounted we added a fim uh listener and when the event is going to be sent from the Native side we're going to console log and remember the event on the native site is being s is being triggered when we call this set theme fun function so let's simply press on one of these button because that's when we call the set fim function so if I send it we see that the event is being logged here okay but what happened on Android V my module V this is the cotlin side okay uh most probably forgot to import bundle off after share preferences I needed to import bundle off function so let's try again by doing npx Expo pre-build and then run Android okay build successful our application is starting here on Android and if I press on for example dark here it should trigger but it doesn't why oh it was connected with this one so the logs are simply here but it works so for example now on our rec native side having this uh possibility to subscribe to events what we can do is we can save const uh fee current fee in a state uh use State we're going to default this to the get theme like we're going to call get F initially and also we're going to subscribe like every time the F changes we're going to do set theme set theme the set is called set theme with event. fee and it's type type with typescript now here I'm going to Simply change the value that we display is not going to be from the module but it's going to be from the state F here so if I change here uh set doesn't exist you see that it changes automatically there system dark light so now we saw how to subscribe to events that are emitted from the Native side one more thing is that this ad event listener will give us the subscription bank called subscrip subscription and uh when we when we start listening for for uh subscriptions we need to clear them out when the component unmounts so I'm going to return a function that will called subscription do remove this way we make sure that we don't have a memory leaks when uh using our application when reloading the subscription is going to be changed be removed and then when we mount it it will be created again perfect so so far it's going well uh the next step is going to be to improve the type safety with enums because right now what we can do is we can have here uh some another text like with uh a wrong value that you might not want to be able to set as a theme so if I'm going to try to press on it it's going to set it as a theme uh in our case we don't want that we want only these three values to be uh available and we can do that using for that we're going to have to start by defining theam on the iOS native side in the Swift file and the theme where is it here the theme is defined as enam inside our class so let's go ahead and open iOS my module Swift not in the definition but after the definition we are creating the theme and this enum we are going to replace with a parameter of a set theme function so instead of string we're going to have a f and here in the get F instead of returning a string we're going to return a theme right I'm not sure why V didn't uh change it here maybe it's going to give us um uh it's not going to be able to cast this user defaults to a theme so that's why but instead of returning here system we can try to access it like theme dot how is it called f dot system row value okay that's how you access the row value of the system here here oh and we need to change it here as well when we send the event or when we are using it because it's an inum accessing the value should be them. raw value here when we set it and as well when we change when we send the event also raw value anything else maybe not uh so I'm still thinking that this is going to give me an error because even though I want to return a Fame this might be casted to might be the type of it is is string so we'll see if it gives me errors I'm going to move it back to string now the same thing on Android native module what I have to do is I need to import con cotl innumerable so on the my module cotlin let's import this [Music] innumerable we Define the en at the end of a file even outside the class class theme value string it can be light dark on system and we're going to take this theme and in the set theme we're going to type the parameter in the set fee function we're going to type the parameter not with string but with an actual theme and that's why we need theme. value and here as well theme. value and in get theme we're going to access it like this as we default anything else hopefully not now it's on the typescript side we on the typescript side as well we need to define a type in the index. TX we Define our uh type that can can have the value light dark or system and here in the theme change event it's not going to no longer going to be a string but it's going to be a f in the get fee as well it's going to be I guess a theme a theme and here as well parameter theme now if we go back to our example up. TSX we're going to see that the wrong value typescript is already suggesting that hey you cannot do that and I'm going to remove it and we can try to rebuild our project for IOS and Android so npx Expo pre-build and run iOS are very specific native features which have challenges with Expo modules uh I don't know I don't think so and yeah the the problem there with get fee on iOS in Swift is is indeed uh should be get them a string here let's try again and the same thing for for Android did I rebuild it already or not run Android so now it works as it was working before but it also has proper type validation for using enums for the for the theme value that like especially if you're building a open- source Library having a very strict API with very strict types uh is going to prevent like a lot of errors because you are building the library but you don't know how people will try to use it so maybe someone will send a different value and you want to prevent that from from happening so with a strect type definition uh you're going to to solve yourself a lot of problems and issues opened on your library uh perfect so congratulation we have created our first simple yet not trival Expo module for Android and iOS and we can continue to the next tutorial to learn how to create a native view exactly now what we have done is we created a native module a native module that doesn't provide UI uh functionalities but it provides us with uh Native Native functionalities or let's say being able to call native functions like set famee and get Fame and uh listening for update in the next step what we want to do is we want to develop a native view a native view is something that we can render on the screen for example think about camera that you render here uh a camera that you would render in your re native3 that is a native view because it is implemented on Android and iOS natively using their native platform specific Library so that's what we are going to build right now and view uh let's go ahead and move to the next tutorial should I go ahead and do a g status um let's do my first Native module and I'm think thinking to to continue working in the same file even though the tutorial is recommending us to create a new one I I will try to to continue working with the same module like my module is going to have is going to be both a module and is going to have like native views as well it's not that you have to choose like one on another it's just what you are implementing so if we go in this tutorial creating a native view uh in this tutorial we're going to build a module with Native view that will render a web view the a web view is a nice way to render uh web URLs like building let's say a browser or in your application if you have something some screens that you're not yet implemented natively you can simply wrap them around a web View and render your website there that's a bit of a trick to to render uh web applications is on Native side so uh we're are going to build our custom web view uh that is going to use on Android web View and on iOS is going to use this uh web view component for more details you can look at the documentation here that's how it loads that's how uh it will open a URL and we will write our native module that is going to allow us to uh interact with these platform specific apis web view for Android and the other one also web view for iOS uh let's go ahead to initial the first step is to initialize a new module as I said I'm not going to do that because it takes a lot of time to build the project so next step is going to be set up our workspace it was encouraging us to delete the pre-existing things okay then we're going to find the following files and replace them with a provided minimal boiler plate Expo web view module that is our IO right iOS my module let's create this Expo web view module I'm wondering if having a different name is going to work Expo web viw module. Swift so let's try in iOS let's create a new file Expo web view module do Swift do Swift Swift and let's add this minimal example minimal code name XO web View and we Define a view but probably here we're going to implement it later okay now for Android the same we need a file Expo web view module cotlin with this name web view so in Android Source Java in this folder let's create a new file Expo web View module. cotlin we're going to paste this code but uh the package should be updated it should be export. modules do not web view but my as you can see here it's called My module my module Expo web view hopefully having a different name is going to work we're going to check we're going to see okay now in Source index in source s index Source index we have here everything from the theme let's create this Expo web view. TSX file Expo web view. TSX file inside the file we're going to have we're going to export this one so it has some props native views re native props required native view manager Expo web view this is the name that it will try to access and here we'll render the native view by sending the props V and in the index. TSX we need to Simply export the web View and the props of that web view so somewhere at the top uh this is for web view now we can go ahead in our app. TSX import this web View and render it on the screen let's try to do that uh let's open example application and I'm going to actually copy paste this one just to have like very minimal and simple application what we are doing is we are importing the web view from Expo web view but I think it's from the name of the the module is actually my module and it's called web view the component now we are rendering this native view with a simple background color purple at this moment let's try to after these changes to rebuild and run our application on IOS and Android so npx export pre-build and then let's do run iOS here and run Android here let's see if I didn't make any typos and if it will work the way we are combining it with a previous code when I iOS it was built if we see yeah something isn't working correctly let's see on Android it didn't even want to build okay let's go ahead and check the iOS require view manager adapter was not found in the UI manager uh that would be interesting require native view manager Expo web view was not found the UI manager got so much error from the first hour yeah I understand uh require Expo web View Expo web view forio Expo web View Expo web view what if we in this case have to do a pre-build D- clean a pre-build D- clean will first remove IOS and Android directory and regenerate them from scratch now if I do run iOS oh now it might take a bit more time actually but name Expo web View I think that's important like we name Expo web view because that's how it requires native view manager Expo web View let's have a look at the Android side what failed there uh Expo web view model not enough information to infer type variable T andol reference Expo web view that is in roid source Java Expo view web view module patience is a must for mobile development yes that's very true so yeah if something is not working um usually I go and double check if I didn't make any mistakes or if nothing jumps into iOS Expo web view module Swift I didn't have them created but I created it separately so I'm not sure if it registered correctly because I might have to do it in my module Swift but I don't know Expo web view name Expo web view cannot find Expo web view in scope so something here Expo web view cannot find it in scope Expo web view. s Expo Expo web view modules Expo web view what is this Expo web view. self maybe it's actually going to be easier to just recreate it from scratch Expo web view. class should it be here my modle that S I don't know yeah let's go ahead and do it from scratch uh I guess it would be easier so if I go back here to my terminal clear LS we have my module let's go ahead and start by creating a new module called Expo web view maybe now it's going to also show us what files we were missing or something like that I'm going to go with all the defaults and uh while it's installing the dependences I'm going to go grab one more coffee and we're continuing e e e okay I'm back and I see that our new modules has been initialized let's go ahead and open it in Visual Studio code by running code Expo VI web view okay now from here we want to remove uh web view types or maybe we can even run these commands in our terminal and now we are left with in the source with Expo web view TSX index and on iOS we have this web view Swift and web view module okay um let's go ahead and in the find the Expo web view module Swift Expo web view module Swift and here we're are going to write this web view yeah that that was what was missing the web view Swift file we had the web view module but the web web view Swift we didn't have it um in the same thing in our uh Android in the cotland Android source Java in the module itself let's remove everything and only leave this one and yeah again as I see that's what we were missing the Expo web view file we don't have to do anything at this moment um we're going to have to go go to the source index remove everything and export only the things from our web view file that will define the properties of our native View and we'll render the native view by rendering the native component okay now inside our example application we can simply go ahead and where example application up TSX let's remove everything and render the web view with a background color purple now we are ready to uh run npm run build in one terminal to build our library and from another one we're going to go ahead and do CD example and run npx uh Expo run iOS and from another one it's going to be npx Expo run Android to test both IOS and Android then Android is malformed would you like to reinitialize it yes why it was malformed got some chocolate for some brain powers so for Android for let's see what's going to be faster iOS or Android I think I'm going to have to do run Android again it got stopped at npm install all right so it was built and as we can see this is a new project a new example let's go ahead and open it and I hope to see a purple background here it is we see the purple background so our very custom and very basic native view uh that we created with our custom module is working on iOS and let's double check on Android as well we see something not uh properly working for Android why is that should we do an NP oh because we are not in the example folder uh okay npx Expo run Android that was the problem it was not in the example folder now build failed why could not res resolve Expo web view I'm afraid that I when regenerating this I messed up a lot yes I did when running uh that in Android I messed up a lot of things oh boy and that's quite bad because uh G status get stash Android I'm going to have to redo it because I run uh run Android in the root folder and it messed with my Android folder over the package so I'm going to do a get stash and again from V step I'm going to remove the files my bad I'm going to replace this web view module Swift inside iOS directory web view module Swift replace for cotlin as well in Android Source Java module that was the part that I messed up previously uh yeah y then the index.ts in the source index remove everything and in the next one web view TSX here like this and lastly in the ab. TSX example up. TSX remove everything put it here so now just to be on the safe side I'm going to do G at git commit uh basic uh basic changes just to if I mess something up to be able to rever back to this one and now yes we can run again npn run build we're going to have to from the example directory go ahead and do run iOS and here go into the example and do npx Expo run Android I didn't CD in the example when running this command previous time that's that was the the bad part so on iOS it was actually took it was very fast because the native side was already built already now we're waiting for Android example application to to be built as well hello decodes how are you doing welcome to the channel if sorry if you're the first time here um probably that's not the best uh live stream to to check out our tutorials because in a lot of tutorials we are uh actually prepared and are building mobile applications today it's more of exploring something new also for me we are exploring Expo modules so if you're interested in building mobile applications with rck Native check out our tutorials on the channel and you I'm pretty sure you're going to find something to to to learn um so yeah welcome to the channel all right our Android application has also been rebuilt and I hope to see a purple background as well okay on Android it's also purple that's perfect now we have the basic uh structure the the the boiler plate to build a custom native View and in our case that's going to use the platform's web view to render a website a URL so let's uh continue by adding the system web view as a sub view of our well of our purple background this one that we created so we're going to start with a hardcoded URL uh on iOS on iOS uh what do we have to do in the Expo web view on iOS Expo web view here is where we will Define them our custom web view this will be used as a a native component make sure to inherit from Expo web view which uh inherits as I read here XO web view inherits from Expo View and Expo view inherits from RCT view from RE native which finally extends from UI view on iOS okay so we need to import web kit right ad top we need to Define this web View and required in the in when initializing our custom web view we are going to have to configure the web view that we have defined here and Define them Define it as a sub view of our component so let's put this code here so when we initialize we add the sub view web view with a with a URL with a hardcoded URL and we render it we load it in our web view okay we need to do the same on Android and on Android we're going to use the web view imported from here so let's go into the Android Source Java Expo web view let's see what do we need to import here up context Expo view context these two things the web kit web View and web view client we're going to import this two here and I'm going going to copy the whole class to replace it with my default one so Expo web view it creates the web view adjust a bit the the layout parameters adds it as a child and loads the the pre-built URL now uh we can go ahead and I think we will have to rebuild so I'm going to do npx Expo pre-build and run on iOS and the same thing on Android now what we expect to happen is instead of this purple background I expect the screen to load the hardcoded URL that we provided there okay on iOS it's already running BND Ling and that's it here we have the web page that we loaded in the web View using this URL hardcoded on the Swift side and the same thing on Android if we check the Android as well it's the web page that we hardcoded and loaded in the web view on in the cotlin on the native side for Android the next step is going to be to be able to adjust this URL from our react native site for example in the example app. TSX when rendering this web view I want to be able to send the URL to open not a hardcoded one so that's going to be our property that we're going to send to the to our custom native view to set a property on The View we'll need to define the property name and Etc inside the Expo module in this case we're going to reach in and access web View Property directly for convenience but in many real world cases you will likely want to keep this logic inside the Expo web view class and minimize the knowledge that Expo web view module has about the internal s okay okay didn't understand a lot here but within the prop Setter block we can access the view and the prop not that we specify the URL of type URL the export module API will take care of converting strings to the native URL type for us that's good so uh starting with a swift in the module itself when we Define view inside that we have to define the property URL that will set the URL of the web view so if I open iOS iOS directory not in example but here and not the view but the module itself where we Define the module here inside where we need to define the property URL property URL uh is going to be of type URL and if it's if it's different than the existing one we are going to load loaded there in Android what do we have to do in Android that's also should be in the Android Source Java in the module. cotlin here somewhere prop URL view URL and then we load the URL to string now in typescript we need to Define that there is a property called URL on our view props so Source index. TSX maybe not index but Expo view. TSX here we have props that currently extend the view props that has style and so on but we need some custom props as well not only the view props but a URL uh that is optional and is of type string now when rendering the native view it will simply pass all the props down there including the URL the last step is going to go uh in the example iOS not example iOS but example app. TSX when rendering this web view I want to also send the URL here we see that we already can do that and if I'm going to do not just. Dev as the URL there and then if I'm going to go ahead and rebuild example project run iOS and now let's do the same run Android on Android it didn't work why on iOS it worked but Android what did I do wrong there in the module probably I have to import something there so let's double check on the Android side the URL yeah exactly we need to import the URL let's do npx Expo pre-build and then npx Expo run Android so on iOS we see that uh our custom component custom web view is opening the URL that we sent from here and if we change it to uh for example Google we should see that it refreshes and loads Google perfect so now we have built a very simple uh browser inside Expo with a custom component for the native view let's see if on Android it also works Android emulator yes it's here it also works correctly perfect um let's follow the tutorial and see what would be the next step add an event to notify when the page has loaded yes um The View callbacks allow developers to listen for events on components where typically register through props on the component for example image on load we can use the event definition component to Define an event for our web view we'll call it on load as well so what we want to do is we want if we want to expose a onload property here say to the r native site that will be called uh whenever the component website loaded whenever the URL has been loaded what we need to do is we need to send this event from the Native side so that's what we're going to do in this step first on iOS we need to implement the make Expo web view extend navigation delegate we can then call onload from the delegate method what okay didn't really understand a lot but let's do that uh we need to make sure that our Expo web view um extends from this navigation delegate so I'm going to go into the iOS view so besides Expo view it will also extend with delegate uh onload is going to be event dispatcher the super clips web View add sub view here we need to save it web view navigation delegate web view navigation delegate is going to be self so that's probably going to expose this own load on the web view we don't need to hardcode and load this URL so I'm going to remove that because we are loading that through the uh Expo view module here based on the property we're we calling web viw load so here we don't need it anymore and we need this function web view what I don't know what's that but let's just copy paste it after the layout sub views web view did finish well basically it's calling this onload it's dispatching this onload event based on the URL with the web view I don't know that's to uh it's some technical implementation of Swift UI uh hopefully it's going to work now we need to indicate in Expo web view model that the view has an onload event uh so above a property URL we have to define the onload event so in the mod module here do Swift above URL property we're going to say that this view has also a on load event for Android uh on Android we need to add override the on page finished function we can then call the onload event handler that we Define in the module so that's going to be a lot Android Source Java on the web view we have the web view context up context okay then at the top we top of this class we are defining the onload event dispatcher unload event dispatcher on the top then we create the web View match parent match parent web view client add view here are some changes when we create the web view client we are overriding the own page finished in this situation we are not overriding anything so I'm going to have have to put here some code to override some functions of a web view client and that function is going to be this override function on page finished because what we want to do is we want to call the on load event with a URL that was that was loaded and I need to remove this uh load URL because we again are loading it through the property let's check if we need to import anything yes we need to import this event dispatcher above Expo view um probably that's it okay let's continue we need to indicate in the module that the view has a onload event similar to iOS inside of the Expo web View module here above the property URL we're going to define the event on load now on the typescript side uh that event payloads are included with a native event property of event so it can access the URL from the onload event we would read event native event URL so we Define a type onload event inside sarus Expo web view above props onload event will send us a URL and the properties will contain another property for the onload Callback function event will have a native event of type onload event and that's it now in the example application uh in the example application up. TSX this onload will tell will give us the event and we can also access here event. native event. URL with type definition everything perfect now let's try to rebuild and run our application again for iOS first and here for Android Dominic uh we are uh playing w we are learning Expo modules API writing native modules for rec native application using Expo modules so website loaded that's the call back from IOS and this is this one is for from Android so that means that we successfully are uh sending the event on our view as well and we are receiving this through a call back property that we can send here with a native event nice uh this way we can have like two- ways Communications from Rea native to the native side through properties and from the Native side back to re native through uh events uh and yeah you can build a browser UI around this component let's I'm not planning to to build it but let's try to to see this browser UI that was done using our custom native Library so now without any changes on the library itself we're going to try to change to to only we don't have a status bar right okay for the status bar I'm going to comment it out but yeah we see here a simple browser that we can go ahead and navigate to not just do Dev enter and we are loading this one and it's using the web view which is our custom native view nice Perfect all right so congratulation you have created your first uh Expo module with a native view for Android and iOS if you enjoy this tutorial and haven't done native modules yet try the create native we have done that already all right so that was our native views as well I think we're going to have to stop here uh but I recommend you to continue uh to continue these tutorials and documentations uh the next one is explaining how we can create a native module that also has a config plugin a config plugin is uh basically um some instructions on how you your library or your module what changes does it have to make on the IOS and Android uh application when installing it into a project for example some in some cases installing a library you need to enable some uh permissions where you need to do some changes on Android manifest and so on uh and in some cases this data should be variable meaning that the developer of the application that is using your application is using your library they should provide this information for example the string for the permission when uh we ask for a permission this is something that developer of application should specify so that's where config plugins uh uh come into play and using these config plugins for example I'm going to show you a an example of a config plugin you probably saw them when installing some libraries uh yes this is the config plug-in that you define in up. Json for example let's check Expo camera Expo camera is example of a package that also has a config plugin so using the config plugin in app. Json we can specify strings for camera permission microphone permission and other configuration and then the native module Expo camera is reading this configurations and is adjusting the native side project when the application is being built so if you need to do that you can have a look at these configurations here as well another use case where uh Native modules come into play is for example wrapping around F party native libraries for example you might find two libraries one for iOS one for Android that does something that you need so instead of Reinventing the wheel you don't want to code it yourself you want to Simply use this libraries for example here Expo is showing an example of a um charting library that this one is for Android and someone developed based on that one based on the Android chart it developed with charts for iOS so that means that these charts they have very native for IOS and Android and they have a very similar UI now using a simple native library that wraps around these native packages you can expose them to react to your react native application and here in this tutorial you can check how you can do that you you'll most of the things are very similar to what we did today the only thing is that your package will also have a dependency for example the Android package will have a dependencies on this um on this library and for iOS it's going to depend on charts and yeah after everything is done uh you can look into this documentation to know to to check how you can integrate it with your application as we saw in the beginning in the getting started guide there are two ways to use a library in your application if native Library you only need it locally in the project that you're building uh when creating it you can create it with D- local and this will create the native library inside your project so in that situation is going to be very easy to use it but if you want to either use it in multiple projects where you want to deploy it as an npm package uh you can check out here in the using a standalone Expo module to see how you can configure the monoo uh where you have your application and your Mo libraries separate in separate repos um and I think also here it is the documentation on how you can publish this library to npm uh it's very simple you just log in and do publish and then you can go ahead and do npx Expo install and the name of your published library in that situation you'll be able to use it in any project and not only you but others as well so that was the Expo modules uh exploration I had this on my to-do list for a very long time and I'm very happy that I finally got to to work with it um really it's a quite um um developer friendly uh experience uh because even though we had some challenges at the beginning I'm pretty sure these challenges are not something is not the problem of of Expo modules it's the problem of my lack of experience working with Native side applications with Android Studio cotlin iOS and so one uh but anyway till the end we managed to do it and I'm pretty pretty happy with how how everything works I'm going to look more into that and see maybe we can create a proper tutorial on the channel what do you say Serge hello uh to be honest I'm not uh doing freelancing at this moment like uh Consulting work but uh feel free to to reach out with project details if it's something interesting we we might be able to do something okay guys so uh thank you very much for watching if you enjoyed this one make sure to subscribe to the channel um and I'm going to see you next week with an

Channel: notJust․dev

Views: 7,614

Keywords: vadim savin, not just development, notjust.dev, live coding, react tutorial, react native tutorial, react native for beginners, React Native, step-by-step tutorial, Expo Modules, Native Library, Swift, Kotlin, React Native New Architecture, Turbo Modules, mobile development, custom native code, Expo development, react native custom library, build an expo library, expo module API, Custom Native code for Android, custom native code for ios, react native fabric

Id: UczTzTBYRhA

Length: 179min 22sec (10762 seconds)

Published: Sat Mar 16 2024