How to close a React-Native Webview?

Question

I'm new to React Native and I have a simple app which opens a Webview when a button is pressed. If the navigation state changes, I want to close the Webview. I'm able to know when to close it but unable to find how.

The doc does not mention any function to do it. What's the solution for this?

version : react-native: 0.47.2

Answer 1

you can add it in Modal

_onNavigationStateChange (webViewState) {
   this.hide()
}
show () {
  this.setState({ modalVisible: true })
}

hide () {
  this.setState({ modalVisible: false })
}

render () {
const { clientId, redirectUrl, scopes } = this.props
return (
  <Modal
    animationType={'slide'}
    visible={this.state.modalVisible}
    onRequestClose={this.hide.bind(this)}
    transparent
  >
    <View style={styles.modalWarp}>
      <View style={styles.contentWarp}>
        <WebView
          style={[{ flex: 1 }, this.props.styles]}
          source={{ uri: `http://google.com` }}
          scalesPageToFit
          startInLoadingState
          onNavigationStateChange={this._onNavigationStateChange.bind(this)}
          onError={this._onNavigationStateChange.bind(this)}
        />
        <TouchableOpacity onPress={this.hide.bind(this)} style={styles.btnStyle}>
          <Text style={styles.closeStyle}>close</Text>
        </TouchableOpacity>
      </View>
    </View>
  </Modal >

 )
}