Exploring State Changes in React Native WebView

hi guys in my last video I show you how to bring in the cool webview component from the react native webview library and today we're going to take things a step further and add a prop that will let us keep an eye on changes happening inside webview so we can take control back to our react native application and render other components if you wanted to we'll be visiting the same open AI blog post we viewed last time and in case you missed it I also shared the webview API reference it's got tons of props you can use to make the most out of your webview So today we're going to take advantage of one of those props and that's the on navigation State change let's get started alright guys so this was the component we created last time we imported it from the react native webview library and added two props to it one was the source which contains the URI pointing to open AI blog post and the other one is the style we added some styling suit to make the webview fit within our simulator View creating this basis at the top of the simulator and a little bit of space at the bottom but today we'll be adding a new prop and last time I showed you the react native webview reference or API reference and I showed you tons of the props that we can make use of to take advantage of webview today we'll be working with on navigation State change and if we take a look at the documentation here specifically the example it'll give us a good idea of how this function works it receives a navigation state or they call it an app state but it receives a a parameter that contains a couple of properties or a bunch of properties as you can see here and one of those properties that we can take advantage of for our application is the URL property and so if we copy this here we copy this example here and use it in our application now we have the on navigation State taking a nav state and now we know that inside that nav state every time there is a transaction within the webview we'll receive an object with a bunch of properties and within those properties the URL property will be in there all right now we have the on navigation State prop and that all navigation State problem takes in a function and that function receives a parameter that parameter is an object we know that object is going to be it's going to contain a URL property and we can use that URL property to then see where our user is navigating within the webview that will give us a glimpse to what the user is doing on the webview or or within the page of the webview one way to manipulate what the user is seeing or manipulate what we render for the react native application is by taking a look at the URL the the user is navigating to and then we can decide whether or not we want to let the user continue looking at the webview or if the user is going to take a look at a different component that we can create within our application and one way to do that is by adding a conditional statement here where we take a look at navstate and specifically take a look at that URL and see if that URL includes the URL or not the URL but the link that we're interested in taking action or taking control of in this case we can call it slash API so if the URL the user is navigating to includes an slash API in it then we can make a state change within our application and that state change will indicate whether we show the webview or not so for that we'll call it set show webview this will be false so let's say the user clicks on slash API we don't want the user to go to slash API for some reason we just want to take control back of what we are showing the user in our application so we set that show webview defaults and of course we need to create that function right I'm sorry we'll need to create that variable uh we'll use it we'll create that variable using you state so we'll have one variable that would be show webview and the other one would be sad show webview this would be EU state it will initialize that state to true so it'll behave the same way we'll be showing our webview right at the beginning of opening the application but then if the user selects or navigates to a specific URL in this case the slash API or any URL containing slash API then we'll decide not to show that webview anymore and we can add some logic to show a new view and to show that new view to the user will take the state and then run a conditional statement based on the value of that state so what we'll do is we'll take that show web View and we'll render a conditional statement where we will be showing the webview if our state is true or we'll be showing a separate View um if our show webview state is false in our case I got something here that we can show fixes here all right so now we have a show review state and a set show with you from you state we're going to be manipulating that state based on what the user clicks within our webview so what we'll do from the get-go is just show the webview to the user pointing to open AI if they navigate to about it'll be fine then go back to blog it'll be fine as soon as they click on the API that URL contains a slash API in there we'll detect that change and set our show web view to false that will cause our view to re-render and in this case show webview will be false and show a different component in our case which is showing it simple View with text component saying this is my app we can see the functionality again if we refresh our app here it'll be reset to true or the show webview state will be reset to True that'll make our webview to be render again but then again we click on API that URL contains a slash API within there will detect that change from webview and render our new view that's all I have for this video I hope you learned something new by adding this new property and be able to navigate back and forward from your webview to other components within your react native application I hope you enjoyed it and see you in the next one

Channel: LG Santiago

Views: 2,163

Keywords:

Id: gsr8uDATCQA

Length: 8min 10sec (490 seconds)

Published: Sat Feb 04 2023