injectedJavascript not working

[jo-fra]

Hi, I try to run a minimal example with injectedJavaScript prop. However the javascript code seems to be not executed.

Versions used: "expo": "~38.0.8", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", "react-native-web": "^0.13.8", "react-native-web-webview": "^1.0.2", "react-native-webview": "^10.7.0"

Setup steps:

1. Init project: expo init
2. Install react-native-webview: yarn add react-native-webview
3. Install react-native-web-webview: yarn add react-native-web-webview
4. create webpack.config.js: expo customize:web
5. Alias the package and add rule to webpack config:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  config.resolve.alias['react-native-webview'] = 'react-native-web-webview';
  config.module.rules.push({
    test: /postMock.html$/,
    use: {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
      },
    },
  });
  return config;
};

This is the minimal sample app:

import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const runFirst = `
  document.body.style.backgroundColor = 'red';
  setTimeout(function() { window.alert('hi') }, 2000);
  true; // note: this is required, or you'll sometimes get silent failures
  `;
  return (
    <View style={{ flex: 1 }}>
    <WebView
      originWhitelist={['*']}
      source={{ html: '<h1>This is a static HTML source!</h1>' }}
      injectedJavaScript={runFirst}
    />
  </View>
  );
}

The HTML gets rendered but javascript not executed.

Also is the injectJavascript method method supported or is it planned?

[rvdende]

Same issue here...

[rvdende]

@jo-fra I think I found the bug..

In https://github.com/react-native-web-community/react-native-web-webview/blob/master/src/index.js#L20 the function returns without updating the injected javascript if source has no method.

So in your minimal sample app add , method: 'get' :

    <WebView
      originWhitelist={['*']}
      source={{ html: '<h1>This is a static HTML source!</h1>', method: 'get' }}
      injectedJavaScript={runFirst}
    />

[bwoodlt]

I'm having the same issue - tried the approach mentioned but didnt work for me...

[quanle1994]

@bwoodlt I think method: 'get' only works if you use the uri instead of the html. If you already have the html string, I think you can just append it to the end like so.

<WebView
      originWhitelist={['*']}
      source={{ html: `<h1>This is a static HTML source!</h1>${runFirst}` }}
    />

[oxbits]

i just followed the initial post instructions [ thank you !!!! 😺 ] and the javascript only runs in android _ it does not run in ios or web :

"dependencies": {
    "expo": "~40.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.0",
    "react-native-unimodules": "~0.12.0",
    "react-native-web": "~0.13.12",
    "react-native-web-webview": "^1.0.2",
    "react-native-webview": "^11.0.2"
  },

[NilsBaumgartner1994]

Also having the same problem