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

Expo SDK
1

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!

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.