O'Reilly logo

React Native By Example by Richard Kho

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rendering links with WebView

When your users select a link, it's beneficial to render that link within your application so that your user doesn't get thrown out of the app and into their browser. To accomplish this task with React Native, we will use the WebView component.

The WebView component renders Web content within a native, app-contained view. For this app, we will use just one of its many props:

  • source: This loads either a URI with optional headers or static HTML into the WebView.

Rendering a WebView component is simple:

import { 
  WebView 
} from 'react-native'; 
 
class WebViewSample extends Component { 
  render () { 
    return ( 
      <WebView 
        source={{uri: 'https://www.google.com'}} /> 
    ) 
  } 
} 

Not all posts contain links in their attachments. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required