how do I make my react native expo webview - android back button work?

Question

I made a simple hybrid app with react-native expo app for my website. right now it is only for android. As you can see, it simply shows my website from webview and if you click out link, browser opens but inside link doesn't.

But the problem is if I click android back button, app just exit. How can I made back button available if it clicks, webview goes back?

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import * as WebBrowser from 'expo-web-browser';
import { Button, Text, StyleSheet, StatusBar, View } from "react-native";


export default class App extends React.Component {
  webview = null;

  render() {
    return (
      <>
      <StatusBar hidden={true} /> 
        <WebView
          ref={(ref) => (this.webview = ref)}
          source={{ uri: 'http://www.mysiteurl.com/' }}
          onNavigationStateChange={this.handleWebViewNavigationStateChange}
        />
      </>      
    );
  }

  handleWebViewNavigationStateChange = (newNavState) => {
    const { url } = newNavState;
    if (!url) return;

    // one way to handle a successful form submit is via query strings
    if (!url.includes('mysiteurl')) {
      this.webview.stopLoading();
      WebBrowser.openBrowserAsync(url);
      // maybe close this view?
    }
  };
}

Thanks!

question from:https://stackoverflow.com/questions/65929196/how-do-i-make-my-react-native-expo-webview-android-back-button-work

Answer 1

Waitting for answers