Access Web Pages through React Native's WebView Component

[00:00] We want to make it so when someone comes to the repos page, if they click on one of these, the names of the repository, we want them to be taken to a web view to see GitHub's URL.

[00:17] Notice we have this on press hammer set up right here, but we're not really doing anything with it yet. Let's change that. We're going to navigate to a new route.

[00:30] The component we're going to use is one we haven't made yet, but we will make it. We're going to name it web_view, the title is just going to be web view, and then what we're going to pass it is this URL which we're getting when we invoke the "open page" function, which is coming in from right here.

[00:56] Now, what we need to do is go into find what this web view is.

[01:00] If I don't do it now, I'm going to forget. I'm going to go up here and say, "web view." We don't need to capitalize that, we're going to put it in helpers, and then it's going to be called web view.

[01:23] Here, let me change the name down here. Let's go into our helper folder, create a new file called "webview.js." Then, we're going to require react and then we're going to need a few things.

[01:44] We're going to need a view, we're going to need a web view now, which is new. The styles for this component, we're going to have a container. It's just going to be flex one, background color of F6F6EF, and a flex direction of column.

[02:09] Now, we have our style set up. Let's go ahead and create our class or our component. We're going to have, we'll call it web view. It's going to extend, react component as normal, we'll return something from this render and then so I don't forget, modular exports equals web view.

[02:33] Then, what we're going to return is a view with our style and inside of that, we're going to use web view.

[02:41] What web view will allow us to do is it'll load a URL, which we're getting from the stop props, the URL that we're passing in inside of the apps view.

[02:53] Now that we have that, the last thing we need to do is add a prop type on here because we don't want this to run unless we give it a URL. We're going to say URL is "react to all prop types." It's going to be a string, and we're going to make it "required."

[03:12] If everything went well, what we should be able to do now is come back over here, do not find variable web, web view 27, because we called that web view. We're here, we type in a name, we go to repos, and then we should be able to come to any of these, maximum call size stack exceed.

[03:45] I did some digging and I did something stupid. Notice, I have a web view variable here, I also named my class "web view." Let's change this to just be web, web here, and web here.

[04:02] Now, the only web view we should have is the web view we're using. Let's go and try this now, I'm going to recompile it, search for a username, view repos, and then angular. There we go, there's our web view.