How it works...

Using a WebView to open external sites is a great way to allow a user to consume external websites while keeping them in our app. Many applications out there do this, allowing the user to return to the main portion of the app easily.

In step 6, we used an arrow function to bind the function in the onPress property to the scope of the current class instance, since we are using this function when looping through the array of links.

In step 7, whenever a button is pressed, we use the title and URL that are bound to that button, passing them along as parameters as we navigate to the Browser screen. The navigationOptions in step 11 use this same title value as the title of the screen. The navigationOptions take a function whose first parameter is an object containing navigation, which provides the parameters used when navigating. In step 11, we structure navigation from this object so that we can set the view's title to navigation.state.params.title.

Thanks to the StackNavigator component provided by react-navigation, we get a header with OS-specific animations, built in with a back button. You can read the StackNavigation documentation for more information on this component at https://reactnavigation.org/docs/stack-navigator.html.

Step 13 uses the URL passed to the BrowserScreen component to render a WebView by using the URL in the WebView's source property. You can find a list of all available WebView properties in the official documentation located at https://facebook.github.io/react-native/docs/webview.html.