Navigate between WebView pages in expo

Question

i built a single Expo app (Android) in managed Workflow, with one static screen that contains a webview.

import React, { Component, useState } from "react";
import { Alert, StyleSheet, Text, TouchableHighlight, View, Modal } from 'react-native';
import { WebView } from 'react-native-webview';




export default class MyWeb extends Component {
  render() {
    return (

      <WebView
        source={{ uri: 'https://example.com/forum/' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}

now i want to configure the Android Back button to switch to the latest open webpage, instead of closing the app. Normal routing isn´t possible, because its a Forum, and had many pages and subpages that change often.

is it possible to configure the Back button like the Back button in a normal webbrowser (go one page back at press in the WebView)?

Answer 1

You can override the android back button with BackHandler

export default class MyWeb extends Component {

  // override the backbutton
  BackHandler.addEventListener('hardwareBackPress', function() {    
    if(this.webref){
      this.webref.goBack();
    }
    return true;
  });


  render() {
    return (
      <WebView
        ref={r => (this.webref = r)} // create a ref to your webview
        source={{ uri: 'https://example.com/forum/' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}