React Native Webview - injectJavascript not working

Question

I'm trying to inject JS code to alert the user before the content of the React Native Webview loads, however, for me it just goes to the activity indicator and loads the Webview without injecting any Javascript. How do I fix this? Code below:

import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from '../../styles';

export default function Links() {

  function LoadingIndicatorView() {
    return (
      <View style={styles.hubLoading}>
        <ActivityIndicator color='#009b88' size='large' />
      </View>
    )  
  }

  const runFirst = `
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `

  return <WebView source={{ uri: https://www.google.com/ }} renderLoading={LoadingIndicatorView} startInLoadingState={true} javaScriptEnabled={true} injectedJavaScript={runFirst} />;
}

Btw, I am running the app on my iOS device if that helps you to answer.

Can my answer help you? If yes, please accept the answer. If no, please provide more information for us to help you. — Mic Fung
– Mic Fung, Commented May 8, 2021 at 9:01

Mic Fung · Accepted Answer · 2021-05-07 04:17:54Z

6

You should include onMessage={(event) => {}} in the WebView

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md

An onMessage event is required as well to inject the JavaScript code into the WebView.

<WebView 
      source={{ uri: "https://www.google.com/" }}
      renderLoading={LoadingIndicatorView}
      startInLoadingState={true}
      javaScriptEnabled={true}
      injectedJavaScript={runFirst}
      onMessage={(event) => {}}
/>

answered May 7, 2021 at 4:17

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kd12345 Over a year ago

Hi, how do i pass a value from my react native app to my webview. eg. i have a session id created when i press a button to open the webview, now i need to access that session id inside my webview for configuration.

Danniel Lee · Accepted Answer · 2022-02-22 20:32:32Z

2

try

injectedJavaScriptBeforeContentLoaded={injectedJavascript}

https://github.com/react-native-webview/react-native-webview/blob/4d8a76f3691479ef22b55e05c07921af99332395/docs/Guide.md#loading-local-html-files

answered Feb 22, 2022 at 20:32

Danniel Lee

876 bronze badges

1 Comment

Bhushan Patil Over a year ago

This worked for me. I had onLoad function inside my script

Collectives™ on Stack Overflow

React Native Webview - injectJavascript not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related