Access Web Pages through React Native's WebView Component

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.

[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.

Joe
Joe
~ 6 years ago

This lesson could use some clean-up.

Using "WEB_VIEW" then "Web_View" in Repositories.js. Naming the component WebView.js which then exports "Web". It's a bit sloppy. One suggestion would be to rename all of them...

As of React Native v0.20 I'm getting this warning "url supplied to WebView has been deprecated. Use the source prop instead"

Changing from: <WebView url={this.props.url}/> to: <WebView source={{uri: this.props.url}}/> solves the issue.

Tyler McGinnis
Tyler McGinnisinstructor
~ 6 years ago

Thanks for the suggestion! Also, looks like your markdown didn't quite render properly...

christopher
christopher
~ 6 years ago

Can you post Markdown, for the Source Prop Correction? Thanks

Marc Cámara
Marc Cámara
~ 6 years ago

For future developers with this problem, you should use <WebView source={{uri: this.props.url}} /> as url is deprecated.