react native webview navigation issue

Question

I am making a test with react navigaton and webview , I have 2 screens , Home and Details , at details screen I am calling / opening a webpage inside webview , let's say that I am calling stackoverflow.com (Page A) , my problem is that when user click a link of the stackoverflow page and navigate and after wants to go back to the previous page (Page A) , it doesn't go , its going or navigating to the Home screen !!! how can I let The user go back to the previous page. ? that 's how I am calling the page

<WebView
        javaScriptEnabled
        source={{uri: 'https://stackoverflow.com/'}}
        style={{marginTop: 20}}
      />

Answer 1

As we know built in back button is not provided in iOs but it is provided in android .

So for considering both platform there is two possibility.

Android.

-> For android you have to define BackHandler so here are the step.

1. import it like this.

   import {BackHandler } from 'react-native'.

2. initialize backhandler inside the life cycle methods.

   componentDidMount() {
       BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
   }
   
   componentWillUnmount() {
       BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
   }
   
   handleBackPress = () => {
      if (this.state.canGoBack) {
         this.refWeb.goBack();
       }
     else{
       this.props.navigation.goBack(null)
       }
     return true;
   }
   

3. define a userdefine variable canGoBack inside the status.

     constructor(props) {
       super(props)
   
       this.state = {
         canGoBack: false
       }
      }  
   

4. create a method which detect the change in navigation of the webview and bind it with the web view.

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

5. Bind it like this.

           <WebView
               ref={(myWeb) => this.refWeb = myWeb}
               onNavigationStateChange={this.onNavigationStateChange.bind(this)}               
               source={{ uri: 'https://stackoverflow.com/questions/51712310/react- 
               native-webview-navigation-issue' }} />
   

6. And thsts it you are ready to go..

iOs

For iOs you didn't have to bother too much.

1. Create a button for back press above the webview or according to your design logic

2. Follow the above webview and navigation logic . forgot about the backhandler and set this code inside the onPress() method of your created button of backpress

   if (this.state.canGoBack) {
       this.refWeb.goBack();
   }else{
       this.props.navigation.goBack(null)
   }
   

Note : Here I use stackNavigator for screen navigation so i used this.props.navigation.goBack(null) this code. if you didn't use it then dont consider this code and replace with your feasible navigator code in else condition

Thankyou..