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. When they do, the hierarchy looks like this:

attachments: [{ 
title: 'Link to Google' 
  url: 'https://www.google.com' 
}] 

Let's make...