Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Open a Webpage in React Native with Linking and WebView

    Chris AchardChris Achard

    There are two ways to open urls in React Native. One is to open, and switch to the device's web browser, and the other is to embed the web page within your application.

    To open the mobile device's web browser, we'll import Linking from react native, and use the openURL function, which will open any url that starts with http or https in that web browser.

    If you want to stay within your current application however, you can import WebView from react native, and use that as a component in your application. Pass in a uri param to display that web page in the embedded web view.

    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 To use a button in your app to open a web page on the device's web browser, import linking from React Native. Linking, let see open other apps that may be installed on the phone, including the browser.

    00:13 In the on press of the touchable element, call Linking.openURL, and you can pass a valid URL to open it. Now, tapping a link will switch apps to the built-in web browser.

    00:31 If you don't want to open the device's browser, but instead you want to open a URL without leaving your app, you first need to make a new screen in your application.

    00:40 We'll call that file, browser. Import React and component from React, and view from React Native. Also, import web view from React Native, which is what we'll used to display the web page.

    00:58 We'll display a view and make sure to flex it to take up the entire page. Then, add the web view component. We'll be using React navigation's params to set the URL for the web view, which will come in under the navigation's state.params.url.

    01:14 Also, be sure to flex the web view to take up the entire screen. We want to be able to go back to the previous screen from this screen, so put in a header with a back button that calls navigation.goBack.

    01:34 Then, add that screen to the navigation stack in app.js. Now back where the link is, we can navigate to the new browser screen, and pass the URL to display in the web view to the navigate function. React navigation will make that available in the component's props.

    01:54 When we run the app and press the link, the browser's screen is pushed on to the navigation's stack. It shows the web page directly on that screen without leaving the current app.

    Discuss

    Discuss