CODEWITHSUNDEEP
javascriptandroidwebviewreact-native
David Ruttka
David Ruttka

Reputation: 14409

React Native Android WebView: javaScriptEnabled does not seem to be working

While developing an app with React Native for Android, I was attempting to use a WebView for an OAuth flow. The WebView displayed correctly, but the provider redirected to their "JavaScript must be enabled" error page.

I thought I found a quick and clear answer in the docs quoted below, but after setting this property, I still got redirected to the provider's "JavaScript must be enabled" error page.

android javaScriptEnabled bool
Used on Android only, JS is enabled by default for WebView on iOS

I created the following component as a reduction, and sure enough, when the WebView displays the resulting page, it reports that JavaScript is not enabled.

Am I overlooking something?

'use strict';

var React = require('react-native');

var {
  View,
  StyleSheet,
  WebView,
} = React;

var MyComponent = React.createClass({

  getInitialState: function() {
    return {
      url: 'https://www.whatismybrowser.com/detect/is-javascript-enabled',
    };
  },

  render: function() {
    return(
      <View style={[styles.container]}>
        <WebView style={styles.webview}
          url={this.state.url}
          javaScriptEnabled={true}
        />
      </View>
    );
  },

});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

module.exports = MyComponent;

Upvotes: 1

Views: 6085

Answers (1)

dannywils
dannywils

Reputation: 46

The docs are referencing pre-release version 0.18 which contains a breaking change regarding enabling JavaScript in Android WebView.

Breaking changes

To enable JavaScript in Android WebView, use javaScriptEnabled instead of javaScriptEnabledAndroid.

react-native 0.18

If you are on a version under 0.18 you can use javaScriptEnabledAndroid but be aware that this will break once it is officially released.

Upvotes: 2

Related Questions