CODEWITHSUNDEEP
react-native
salmanaacvf
salmanaacvf

Reputation: 257

react native webview navigation issue

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}}
      />

Upvotes: 3

Views: 9040

Answers (1)

Jay Thummar
Jay Thummar

Reputation: 2299

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..

Upvotes: 14

Related Questions