Adding Web views with Progress Bars in React Native

[Music] hello in this video i want to talk about web views in react native so sometimes you want to write native code and sometimes you just want to load a web page from either the internet or you want to load your own html into your app and there's a very easy way to do that in react native is called react native web views so if you go to the docs here for react native you'll see that the webview component has been deprecated here so we can go here just do npm install react native web view like this here so if you go to the app here i've already done that so i'm going to go down here to the package.json and you can see that i've added that library here and i've also added a library called react native progress so if you go to this tab here this is a great library to add progress bar to your app it's very very simple as you can see down here in the docs you do npms dog protect into progress and then you can choose from a normal progress bar or a circle or a pie here too so we're just gonna stick with the bar uh let's go back to the app and i've added both of those i've added the webview here and i've added the react native progress here you don't really need to do any other setup for android and ios which is nice so if you go to the playground right now all i have is a blank fragment here so we can go here you see it's blank the first thing i want to do is i want to import that webview component so let's go back here to the docs and i want to import this so i'll copy and paste this into the app and now i want to create the webview component so i'm going to return that here so i'm just going to say web view and we can actually just terminate that here and for the webview first you need the source so you put in the source prop here and it's pretty easy you just do equals and then two brackets here first you want to put in the uri which tells the webview where to go and i'm just going to put in let's say google.com very simple save this but this needs to be on the same line here there we go so let's open the webview and now you can see that we loaded it from google.com very easy the thing i like about this library is if you go to different links then you still stay within this window here and now let's see how you would actually handle an error so there's a few errors that you can get with webviews let's go down here and there's a prop called on error and then in this prop it takes in an event so we can say event and then we can actually console log the event console.log let's actually do an alert for that so i'm going to say alert and then i'm going to pass in some string here so it's going to be a template string so i'm going to say web view error and then we'll pass in the event here so look at the type of event here so if you hover over here it says event is a web error event so that's not actually what you want to print you want to print the native event so you say dot if you look in here there's a few different variables that you can use i want to say native event this is of type webview error so this is actually where you would get your error from right here like your error string so we can say native event and then we can say dot and then you have a few different options here you can print the error code description url etc so we're gonna print the error uh description here yeah okay if you go back to the web view nothing will happen yet because this is a valid domain but let's put in a url that's not valid so let's put in some random string here save let's go back to our open web view button and you'll see here it's kind of hard to see there's the text is pretty small in here but you'll see that it says webvr a server with a specify hostname cannot be found so this is what you would expect for that type of network error okay and the package also prints out the error on the webview screen itself which is nice okay so let's go back to our normal domain here let's change this to amazon.com just to show more stuff on the screen so let's do amazon.com and i'm gonna comment out this error for now so let's go back and open and now you see the amazon site here so next i want to talk about injecting javascript within your webview maybe you have a website that you want to load but you want to change the background color or the font sizes or you want to show an alert from the website to your app it's actually pretty easy to do that so let's go up here and i'm going to create a new say constant javascript and i'm going to create a template string that's because we are going to have strings within this string so i'm going to say window to get the window and say dot alert and then i'm gonna put in a string here to alert the app uh i'm gonna say this this is javascript and then down here there's a few props that we can use we can say injected javascript injected before content before content for mainframe only i'm gonna say before content so before the content is loaded i wanna show this alert so i'm gonna say equals javascript here like so so i'm gonna save and then let's go to our web view you can see that we have this is javascript injected into this page before it's loaded and now the page is loaded okay so say you have a local html file that you want to load into your web view so how do you do that that's actually pretty easy so before the video started i actually put a sample html file in the app i just copied this from a sample site on the web so i don't have to type all this stuff out myself so this is where you would put it for the ios app and if you want to load html from android you actually need to put that inside of the android directory so you go up here go to your your source main assets and then put the sample html inside of this ss folder so keep that in mind if you want to load html from android it has to be inside of the android directory in the assets folder but for ios it doesn't need to be in the ios directory it just needs to be in the in the access folder for your app so let's go back to the playground screen here and now i want to point to both of those locations for android and ios so i'm going to create a new constant local file equals then this will be a ternary operation so i want to know whether i want android or ios doing that is actually pretty easy so all you do is say platform dot os so this gets the os version whether it's ios or android for our case then i'm going to say if it equals equals ios first then i want to actually return that file for ios let's look in the docs again real quick let's go up here file so you'll see here for ios you would do require and then point to the local html file so you can see this works for ios and windows and for android you need to point to your access directory which all you need to do is put file three slashes android asset and then your local html file here so let's go back to our code for ios we say require and then we put in quotes here dot assets and then we just point to our file pretty easy colon and for this this needs to be a uri so we do brackets uri and then we can say file three slashes then we can say android asset and then we point to our sample dot html so this android asset points to the asset directory of your android app so this always has to be named android asset android underscore asset and i'm missing the question mark here okay so now actually loading it is pretty easy we can comment this line out and i want to do source local file and that's it so let's restart the app let's go here you can see we still have this in there and then we load our file so i'm gonna comment that out too so this is the html file you can see this is a header this is a medium header etc the text is very small you could change that yourself using the font sizes but i just wanted to show you how to actually load the html file locally so now i want to talk about another way to push data from your javascript code to your app so let's go back to the docs and as you can see there's another way to actually push data from javascript and that's post message and on a message one message is another prop for the webview it takes in an event just like the on error prop so let's do equals event so i'm going to just show another alert just to show you that it's working correctly so i'm going to say alert and pass in this event so similar to the on error this event is not the actual message that we want so we say event and then we say dot dot native event so we have webview message is the type here so in the webview message we have a few different options but we just want to get the data so data okay but now this app doesn't do anything by itself yet so we can go back so you can see everything is the same here so to pass data back to our screen here we need to actually put data inside of the javascript so let's go back to our sample.html file here and i'm going to actually put a message to post data i'm going to go back to the docs just to save time and i'm going to say one message and let's search for post message so post message that's here so i'm going to copy this part and put that at the top of this html file and this should be inside of the script tag my mistake so this is a script that we're adding to the html but i'm just going to get rid of the timeout for this so let's do this let's just do window post message and i'm going to say this is a message from js and save let's go back to the app and you can already see it here but let's reload it just to make sure and tada you can see that we have a new alert here saying that we have our message so i showed you two different ways to actually post data from your javascript to your app so there's a couple other things i want to talk about too so if we go back to our playground here we can also inject inline html so instead of the local file here we can also pass an html object to here so we can say brackets html so this is a static html page to display in the web view and you can put whatever html you want in here so let's just put a header so let's just say h1 this is inline html and this has to be in quotes don't forget that and save and now you can see we have our inline html here pretty easy so let's go back to our amazon source so comment this out and you can also add headers to your webview too so let's go down here you can do a comma so you can add headers and i'm assuming that you know how to format headers you just do your key and value whatever your key is here you will put it here whatever the value is here you could put it here so maybe you'll have a authentication key or something you could put that here so let's put that on a different line here so the last thing i want to talk about is probably the most interesting thing for this type of video and that is the progress bar we've already added the progress bar library to our app let's go back to the document for that and let's import our progress so let's do this import here copy and paste into the app i want to show the progress bar for the page being loaded up top so i'm going to add a fragment to here so let's do this and put the end down here okay so now i want to add the progress bar up here so if we go back to the docs here you can see we have a few different props that we can add to our progress bar component let's copy this here to save time i'm just going to leave it as this for now just so you can see how it is but for the width uh it says in the docs for the width if you want it to be the full screen then you would just set it to normal so we'll set it to null here and let's save and now you can see we have our press bar here but now we want it to be loading as the web page loads so luckily webview actually provides you with the progress as the webview loads first i want to create some state for the progress because i want to send the progress from our webview to our state which then the progress bar listens for so let's go up here i'm going to actually create some constants for that so i'm going to say constant i'm assuming that you know how to use hooks for rex native if you don't then please look at my video that i did for hooks the link should be at the top of the screen now okay so let's do constant and i'm gonna say let's call it progress and then i'm gonna say set progress and then i'm going to say use state and then we're going to pass in 0 by default so no progress by default use date and while i'm here i want to create a second uh state so i want to say constant i'm going to call this is loaded so i want to state for knowing when the page has been loaded or not so it's loaded and then i want to say set load equals use state and by default it will be false so you can set it to true and do it slightly different way than i'm doing it but it's really up to you okay so we have our two states here so now in the web view how do we actually set our state so there's two different props that are very helpful for webview there is the one load progress and unload the end so on load progress i actually want to set the progress here so unload progress equals we get another event in here this event is of type webview progress event but again we need to use the native event from that object so we could say set progress from our state above and then i want to pass in the event dot native event if we want to we can actually just take out the native event from here directly let's just say native event in brackets and just say native event there we go native event dot and you have a few different options here but we want to get the progress so progress is a number so let's save and now let's actually handle our progress in the progress bar itself so let's put these down here and i want to set the progress based on our state so we just copy this into our state here or into our progress here and save and as you can see it was very fast but the actual progress did change as the page loaded so let's go back let's load it again see and it goes from 0 to 100 it's kind of hard to see on here but the actual progress bar isn't a square it's rounded so there's a lot of curvature at the end here which we don't want so i'm gonna go up here and you can actually style the progress bar the way you want to so i'm gonna actually set the border width to zero because i don't want that that blue outline that you see here so you can see the blue outline here i don't want that so let's set that to zero and i wanna set the border radius to zero zero okay so let's go back and see how this looks looks a lot better uh let's change the color too so we can change the color so color equals let's just do orange so we have orange now so this works great so far but we want the progress bar to go away when the page is loaded so that's pretty easy we can go down here and we can say one load end so for this we can also pass in the event if we want to but we don't really need it for this case so i'm going to leave that empty and for this i want to set the progress or sorry i want to set the loaded now so i want to set load it equal to true so when the page first loads this loaded flag will be false and when it's done loading we'll set it to true okay and now up here we want to have a condition that makes this null when we have loaded our page so doing that is actually pretty easy we can just create a ternary operation so let's go down here and create some brackets and i want to put that inside of our bracket and i want to say if not is loaded so if the page has not been loaded then i want to show this here so question mark this else i want to just show nothing so we'll put noel here okay so let's save let's go back and let's open this again and now you can see after our page loaded that the bar went away that's actually pretty useful you'll see a lot of apps using progress bars in different ways this is a pretty typical way to use a progress bar for your web views in your app i think that covers everything that i want to do with webviews if you have any questions leave them in the comments stay tuned for the next video and happy coding bye

Channel: The Flutter Factory

Views: 23,870

Keywords: react native webviews, react native progress bar, react native load html, react native custom progress bar, cross platform mobile app development tutorial, cheetah coding

Id: Gz6WyN7E1Y4

Length: 20min 33sec (1233 seconds)

Published: Wed Nov 18 2020