How to close a React Native WebView

In this React Native source code example, the source code below illustrate how to close a React Native WebView.

You can copy and adopt this source code example to your React Native project without reinventing the wheel.

import React, { Component } from 'react';
import { WebView } from 'react-native';
import {Button, View,Alert,Modal} from 'react-native'

export default class App extends Component {
  state={showWebView:true}

  renderWebView(){
  if  (this.state.showWebView === true){
    return(
      <WebView
        originWhitelist={['*']}
        source={{ uri: "https://google.com" }}
        style={{flex: 1}}
      />
    );
  }
  return null;
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Button
          onPress={()=>this.setState({showWebView:false})}
          title="close"
          color="#d46948"
        />
      {this.renderWebView()}
      </View>
    );
  }
}

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment