ReactNativeJS: ReferenceError: Can't find variable: document

Question

I use react native to develop an app, but i am trying to call setConf() function from my app.js, but apparently React does not recognize document which is in the Script.js file when I import this js, how to call the function without having the document problem? Thank you

Error : ReactNativeJS: ReferenceError: Can't find variable: document

import React from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';
import WebView from 'react-native-webview';
import {
  Colors
} from 'react-native/Libraries/NewAppScreen';

import setConf from './Script'

setConf();

const App: () => React$Node = () => {
  return(

    <WebView
        originWhitelist={['*']}
        source={{uri: "file:///android_asset/widget/index.html"}}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
      />
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Script.js

var form = document.querySelector(".form-composer");
form.addEventListener("submit", setData);

export function setConf() {
  var Id = 1;
  ...
}
...

Rajan Rajan · Accepted Answer · 2020-03-26T10:13:33

In WebView, you can inject Script as below

<WebView
 source={{ uri: this.url }}
 ref='WEBVIEW_REF'
  injectJavaScript={
   "window.testMessage = 'hello world'"
  }
/>

WebView Documentation

/**
 * Executes the JavaScript string.
*/
injectJavaScript: (script: string) => void;

ReactNativeJS: ReferenceError: Can't find variable: document

1 Answers