How to do it...

1. Let's start by opening the App.js file. In this file, we'll be using the StackNavigator component provided by the react-navigation package. First, let's add the imports we'll be using in this file. HomeScreen is a component we will be building later in this recipe:

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';

import HomeScreen from './HomeScreen';

1. Now that we have our imports, let's use the StackNavigator component to define the first route; we'll be using a Home route with links that should be displayed using the React Native WebView component. The navigationOptions property allows us to define a title to be displayed in the navigation header:

const App = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home'
    }),
  },
});

export default App;

1. We are now ready to create the HomeScreen component. Let's create a new folder in the root of our project, called HomeScreen, and add an index.js file to the folder. As usual, we can begin with our imports:

import React, { Component } from 'react';
import {
  TouchableOpacity,
  View,
  Text,
  SafeAreaView,
} from 'react-native';

import styles from './styles';

1. Now we can declare our HomeScreen component. Let's also add a state object to the component with a links array. This array has an object for each link we'll be using in this component. I've provided four links for you to use; however, you can edit the title and url in each links array object to any websites you'd like:

export default class HomeScreen extends Component {
  state = {
    links: [
      {
        title: 'Smashing Magazine',
        url: 'https://www.smashingmagazine.com/articles/'
      },
      {
        title: 'CSS Tricks',
        url: 'https://css-tricks.com/'
      },
      {
        title: 'Gitconnected Blog',
        url: 'https://medium.com/gitconnected'
      },
      {
        title: 'Hacker News',
        url: 'https://news.ycombinator.com/'
      }
     ],
  };
}

1. We're ready to add a render function to this component. Here, we are using the SafeAreaView for the container element. This works just like a normal View element, but also accounts for the notch area on the iPhone X so that no part of our layout is obscured by the device bezels. You'll notice that we are using map to map over the links array from the previous step, passing each one to the renderButton function:

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.buttonList}>
          {this.state.links.map(this.renderButton)}
        </View>
      </SafeAreaView>
    );
  }

1. Now that we have defined the render method, we'll need to create the renderButton method that it's using. This method takes each link as a parameter called button, and the index, which we'll use as the unique key for each element renderButton is creating. For more on this point, see the Tip in step 12 of the second recipe in this chapter, Detecting orientation changes.
   The TouchableOpacity button element will fire this.handleButtonPress(button) when pressed:

  renderButton = (button, index) => {
    return (
      <TouchableOpacity
        key={index}
        onPress={() => this.handleButtonPress(button)}
        style={styles.button}
      >
        <Text style={styles.text}>{button.title}</Text>
      </TouchableOpacity>
    );
  }

1. Now we need to create the handleButtonPress method used in the previous step. This method uses the url and title properties from the passed-in button parameter. We can then use these in a call to this.properties.navigation.navigate(), passing in the name of the route we want to navigate to and the parameters that should be passed along to that route. We have access to a property called navigation because we are using StackNavigator, which we set up in step 2:

  handleButtonPress(button) {
    const { url, title } = button;
    this.properties.navigation.navigate('Browser', { url, title });
  }

1. The HomeScreen component is done, except for the styles. Let's add a styles.js file in the HomeScreen folder to define these styles:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonList: {
    flex: 1,
    justifyContent: 'center',
  },
  button: {
    margin: 10,
    backgroundColor: '#c0392b',
    borderRadius: 3,
    padding: 10,
    paddingRight: 30,
    paddingLeft: 30,
  },
  text: {
    color: '#fff',
    textAlign: 'center',
  },
});

export default styles;

1. Now, if we open the app, we should see the HomeScreen component being rendered with our list of four link buttons, and a header with the title Home rendered in the native style on each device. Since there is no Browser route in our StackNavigator, however, the buttons will not actually do anything when pressed:

1. Let's return to the App.js file and add the Browser route. First, we'll need to import the BrowserScreen component, which we'll create in the following steps:

import BrowserScreen from './BrowserScreen';

1. Now that the BrowserScreen component has been imported, we can add it to the StackNavigator object to create a Browser route. In navigationOptions, we're defining a dynamic title based on the parameters passed to the route. These parameters are the same as the object we passed into the navigation.navigate() call as the second argument in step 7:

const App = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home'
    }),
  },
  Browser: {
    screen: BrowserScreen,
    navigationOptions: ({ navigation }) => ({
      title: navigation.state.params.title
    }),
  },
});

1. We are ready to create the BrowserScreen component. Let's create a new folder in the root of the project called BrowserScreen with a new index.js file inside, then add the imports this component needs:

import React, { Component } from 'react';
import { WebView } from 'react-native';

1. The BrowserScreen component is fairly simple. It consists only of a render method that reads the params property from the navigation.state property passed in to call to the this.properties.navigation.navigate that fires when a button is pressed, as defined in step 7. All we need to do is render the WebView component and set its source property to an object with the uri property set to params.url:

export default class BrowserScreen extends Component {
  render() {
    const { params } = this.properties.navigation.state;

    return(
      <WebView
        source={{uri: params.url}}
      />
    );
  }
}

1. Now, if we go back to the app running in the simulator, we can see our WebView in action!