Adding a Back Button for React Native WebView

Sometimes when writing an app, we need to show some web page to the user. We may want them to be able to interact with the page, but also return to the page we originally showed to them. In this case, you may find yourself adding some kind of back button to your app.

The React Native WebView gives us all the information we need to be able to link a back button to it, although it may not be immediately obvious from the docs how to do this. This guide will run through an example of how to do this.

A working example can be found on React Native Playground here and a repository with a working example project can be found here.

A stylesheet containing the styles referenced in the code snippets below can be found in the React Native Playground example mentioned above.

Setting up the WebView

Before we can add the button, we need to have a WebView that shows the content in the first place. So, presuming that you’re starting with a new project, lets replace the example components in the render method of index.android.js (and/or index.ios.js) with the following:

<View style={styles.container}>
  <WebView
    ref={WEBVIEW_REF}
    style={{flex: 1}}
    onNavigationStateChange=
      {this.onNavigationStateChange.bind(this)}
    source={{uri: ‘https://google.com’}}
    /> 
 </View>

We’ve done a few things here:

• Set the source property so that the WebView will load http://google.com
• Added a ref property so we can easily get a hold of the WebView later on
• Added a callback for onNavigationStateChanged

Right now, lets focus on the onNavigationStateChanged callback. The WebView will call this callback every time the WebView’s state changes. At any one time, the WebView can either be idle, loading or in an error state (for instance, if the request timed out).

When this callback is called, it is passed on object containing information about the page that the user is currently looking at. So lets implement the callback to get ahold of this information:

onNavigationStateChange(navState) {
  this.setState({
    canGoBack: navState.canGoBack
  });
}

Here, we’ve pulled out the canGoBack property and set it in our component’s state. This property tells us if the user has navigated past the original page we loaded and so can go back towards the original page.

There are other properties that you can pull out, such as whether the page is still loading or not and the URL of the current page. You could log navState to console to take a closer look if you’re interested in what other information it contains that you could make use of. For now, we have everything we need to add the back button.

Adding the Back Button

Thanks to our callback, we now have a value in our component’s state that tells us whether we should have an enabled back button. We still need to actually add a button that the user can press to go back. So, we’ll add the following above the WebView component in the root View:

<View style={styles.topbar}>
  <TouchableOpacity
    disabled={!this.state.canGoBack}
    onPress={this.onBack.bind(this)}
    >
    <Text style={styles.topbarText}>Go Back</Text>
  </TouchableOpacity>
</View>

We’ve added a wrapper View so that the button is shown in a top bar above the WebView. Then, we’ve wrapped the Text component in a TouchableOpacity component and added a callback so that we can handle when the user presses it. Finally, we’ve linked up the disabled property of the TouchableOpacity component to our canGoBack state property so that the user can’t press the button if they are on the original page.

The final step is to link the WebView and the back button by implementing the onBack method referenced above:

onBack() {
  this.refs[WEBVIEW_REF].goBack();
}

Simple, eh? We’ve used the reference we added to the WebView at the start to get a hold of it and then simply called it’s goBack method to navigate back.

That’s it! You’ve now got a back button for your WebView. The full example can be found on React Native Playground here or in a repository here.

If you have any questions, feel free to post below!