How To Enable Disable JavaScript Code in WebView React Native

JavaScript and jQuery is the base of almost every web application(Websites) present on internet because of its flexible environment. But infrequently hacker or bad peoples needs to inject some bad code in user’s device using JavaScript, So here this features helps the android and iOS application user to stop executing JavaScript and jQuery on their webpage loaded inside WebView in device. So in this tutorial we would going to make a react native app with Enable Disable JavaScript Code functionality and Stop executing JavaScript + jQuery code on their WebView using WebView’s javaScriptEnabled={Boolean Value} prop in Android iOS application.

Contents in this project Enable Disable JavaScript Code in WebView React Native Example :

1. Import StyleSheet, Platform and WebView component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, WebView} from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Platform, WebView} from ‘react-native’;

2. Create WebView component inside render’s return block with javaScriptEnabled={Boolean Value} Prop.

If we set javaScriptEnabled={true} then it will Enable the JavaScript on WebView.
If we set javaScriptEnabled={false} then it will Disable the JavaScript on WebView.

<br />
render() {</p>
<p>        return (</p>
<p>          <WebView<br />
          style={styles.WebViewStyle}<br />
          source={{uri: ‘https://Google.com’}}<br />
          javaScriptEnabled={false}<br />
          domStorageEnabled={true}  /></p>
<p>        );<br />
      }

render() {

return (

<WebView

style={styles.WebViewStyle}

source={{uri: ‘https://Google.com’}}

javaScriptEnabled={false}

domStorageEnabled={true} />

);

}

3. Create Custom Style :

<br />
const styles = StyleSheet.create(<br />
{</p>
<p> WebViewStyle:<br />
 {<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    flex:1,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
 }<br />
});

const styles = StyleSheet.create(

{

WebViewStyle:

{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

marginTop: (Platform.OS) === ‘ios’ ? 20 : 0

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Platform, WebView} from ‘react-native’;</p>
<p>export default class MainActivity extends Component {</p>
<p>      render() {</p>
<p>        return (</p>
<p>          <WebView<br />
          style={styles.WebViewStyle}<br />
          source={{uri: ‘https://Google.com’}}<br />
          javaScriptEnabled={false}<br />
          domStorageEnabled={true}  /></p>
<p>        );<br />
      }<br />
    }</p>
<p>const styles = StyleSheet.create(<br />
{</p>
<p> WebViewStyle:<br />
 {<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    flex:1,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
 }<br />
});