Using WebViews in React Native + Expo | The Dev Environment

hey everybody I'm Charlie welcome to the dev environment today we are going to be talking about web views and why is that important well imagine you have a website and you want to turn it into a native app or you have a native app and you need some web Snippets here and there maybe for documentation or for a payment Gateway or something along these lines well this is so easy it boggles my mind actually to use the webview so I'm going to show you uh just super quick um so webview here is built by the react native community so they have this little webview component react native webview component and um basically what it allows you to do is it kind of injects like a little mini browser into your application so if you use like Instagram or Twitter or Reddit or any of these things you'll notice that when you click on web links you don't actually leave the app experience you kind of like can view like a news article and then press back and you're back into Reddit and so that's the really cool part about this is how easy you can actually install this so um we just did the Xbox install now it's going to run Expo run Dev and so I'm going to open it up because once again um showing that this works cross-platform is cool but this also brings us to a very interesting thing about react native and Expo that I absolutely love and that is the fact that you can do Platform specific uh file extensions and the reason that that matters is that you'll see here that the webview works on Android and iOS but it doesn't work on web and obviously for that reason it's because you're loading an entire native module needed to render a browser inside a variety of browser it's just going to be a performance bottleneck so you obviously can't render a webview in web so you need to be able to handle what are you going to do on the website of things and what are you going to do on the native side of things so it's really cool so let's do this together so we're going to use the dev environment website this is just like our Consulting website um I do do Consulting for companies so I'm pretty booked up right now I'm not even trying like pitch this but just in the future if anyone needs some help or something let me know um so yeah so this is the documentation for react native webview and so uh what I'm going to do is you'll see like this app it's really simple this is just the Expo router typescript that I built and I've done some videos on so check out my other videos if you just want to see but this is just like a really quick start that just gives you like a boilerplate for uh react uh Native and Expo app that uses Expo router which works a lot like nexjs router so you'll see that we have like this main route this is our index route is to the screen's home uh component and then we have the second route which goes here so I'm going to do this on the second route actually but once again just before we start we need to handle a web and we need to handle a native version so we have the web here and you can see we can go to the second screen in the home screen and we can do this on on the native app as well but if we're going to put a web view in it's going to break the web uh experience so what we can do is we actually just copy this file and I'm just going to like paste it back in but I'm going to change it and add dot native dot CSX to the file extension and so what this is going to do is Expo is really smart when it does module resolution it's I'm linking to the source screen second component and it's going to know what the platform is so if I'm on iOS or Android if I dot native it's going to load this native component and if I'm on the web it's going to load this web component now note you sometimes have to restart your server if you create both of these because especially if you started the server before you've created the file extension um so just make sure you do that so I'm just gonna restart here and uh you can also dot native is one dot iOS is another and Dot Android as well so you do have and then dot web as well so you can specify it's gonna anything that doesn't match so like native is going to match to Android and iOS or iOS is going to match to iOS but uh if there's a platform that doesn't match to the file extension type so for example in this case we have native so Android and iOS are covered but web isn't it's going to default to anything that doesn't have a file extension so you do have fallbacks which is really cool so like let me show you so they're both running they're actually running two different components on the second screen here but you're not gonna be able to see so let me demonstrate so here I'm in the native one so I'm just going to add native and you're going to see now native is showing up over here but it hasn't shown up on the web so if I go to the default one and I go web and say if now web is here so we're running specific to the platform and so this is really cool for like things like analytics if you use ads like Google ads or anything like that the native module is very different from the web module so that having this platform specific file extensions is like very very useful I'm going to link the documentation in the description down below but this is going to allow us to do the web view on our one side and then we'll figure out what to do on the website afterwards so let's go web View and we're going to import this from react native webview here and then so we're just going to make like a very basic one if you go into the documentation here they have just the actual webview itself so I'm just going to clear out this and I'm just going to drop out these because I don't need them anymore and then so I have to replace the sasda container because I don't do that oops and so it's gonna backspace these out and I'm just gonna make it Flex one and then uh oops I put these here these need to be there so now we're good and so now you see right away it's loaded a web View and it's loaded the expo.dev site and on our native app if we refresh it's still just the second screen so what I want to do is I'm going to set this to the dev environment.com and now I've loaded up our website into an app but you'll see there's no way to navigate right now so in the header is shown I'm just going to set that to true and then I'm just going to change the title to the dev environment and there we go and so now I can link back to the home screen and I can go to there whereas the web version is unchanged at the moment so now on the web basically we want to set some things so how can we do this well one thing that's really nice is just like we kind of did with the platform specific file extensions we can actually import platform from react native here and then in the href this is where I'm going to want to change things so I've built this link button component and I'm just going to set it to if platform.os equals web uh then I'm gonna send the user to https slash uh the dev and environments.com and then if not I'm gonna send them to the second route so now when I go to the home screen and I go there now it takes me to the website on web and when I go here then it takes me to the second screen which is displaying the website on Native so this is really cool so now the user kind of has full control over what they want to do you could do things like setting the target making it open in a new tab all these things um you can read all that in the documentation that I'll post below but I want to show you one more thing that I really like about this and that is that in this web view we are actually able to interact with the Dom and so um what I'm going to do is I'm going to create a ref first of all so I'm just going to go const web ref equals use ref and I'm going to set it to null by default just for typescript and then here I'm just going to set ref equals to webref and then now what I can do is I can do a use effect and here um I can just in the dependency array just pass in web ref because it's going to want to check it and I'm just going to do a quick check so like if webref.current exists then we'll go webref.current dot inject Java script and then so what this is going to do is this is going to give us the capacity um to inject JavaScript oh sorry I'm just getting yelled at by typescript so just go web view there we go and then so uh now what I can do is I can go like document dot get Elements by tag name and then what I'm gonna do is if I just go to this Dev environment site here and I'd say I want to change this so I see uh it's an H2 you can do this by any query selector so like if you wanted to do um you know something specific to if you had like test IDs or any of this stuff um I don't hear because I use style components and it makes like these Dynamic class names so it's kind of hard to grab things so I'm just doing it by an H2 just for example but you could do it by a lot of different things and then what I'm going to do is I'm going to make inner text equal hello world oops world and then one thing you just want to do is just do it true at the end of any JavaScript injected it just has to do with kind of like how the um just kind of like how things work uh in the current um ecosystem I don't know why it like throws a little error if that kind of happens um oops sorry I'm just gonna make this inner HTML oops there we go and so you can see that hello world now has been injected into the site so I can make it say the dev environment and boom and so now what I can do is actually through the mobile application I can inject JavaScript into the web there's a lot more functionality here and I and I'm happy to go more in depth with it like you can post messages and stuff like that so you can actually have like interactions back and forth um with the web so if you go here uh post message so this like window.post message then on your native application you can window uh you can like read the messages that are sent to the window and stuff like that like it'll add it into the window object um and so you can actually send things back and forth so for example let's say you had like a form of data that was in a web experience and then you wanted to like parse it into Json and then like return it back to the application to like fill out or vice versa let's say in the application you filled out a form and then you want to go to like a web login and then like send the form data as well um these post message functionalities are like really easy to use and and um it just means that you can kind of like develop in real time on the web and um on the app at the same time and kind of like have them interface with each other um so I'm doing this for a client right now and I just thought this is a really cool video um so yeah like I mean we kind of did both um once again I just wanted to like do a quick little update here because like you see here that I did an external URL and an internal URL um and so that's not available by default but I updated this in the Expo uh router typescript sorry I can remember the name X100 typescript package um where uh if the if the URL that you send like starts with a slash then I know it's an internal link so it'll it'll use the link component from Expo router um if it's an external link um then it's a button press and we use the Expo linking um package to open the URL externally so then that way we kind of have the functionality on both and you can just like dynamically pass in the link button component just like a complete URL or a relative path which is really cool anyways thank you so much for watching this video um I'm happy to go deeper into any of these questions so please if you do have any questions or there's something that you're really interested to learn uh please post it down in the comments below and I'm happy to make a video on it um I'm actually recording another video after this there's going to be a coding challenge because like I've gotten a lot of feedback that people want a little bit more of those coding challenges so I'm gonna post one very soon as well so stay tuned for that uh if you're not subscribed Please Subscribe and if you liked this video and you learned something from it please give a like and thank you so much for watching I will see you next time

Channel: The Dev Environment

Views: 6,109

Keywords:

Id: YkWl1Sfl0e8

Length: 13min 1sec (781 seconds)

Published: Sun Jul 09 2023