react-native-slim-web-view v1.1.0

Published at https://www.npmjs.com/package/react-native-slim-web-view

react-native-slim-web-view

Getting started

$ npm install react-native-slim-web-view --save

If error about your react-native version, you can simply edit this library's package.json

"peerDependencies": {
  "react-native": "^0.64.0"   <<< change to your RN version
}

Mostly automatic installation

$ react-native link react-native-slim-web-view

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.slimwebview.SlimWebViewPackage; to the imports at the top of the file
• Add new SlimWebViewPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-slim-web-view'
   project(':react-native-slim-web-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-slim-web-view/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-slim-web-view')

Usage

import SlimWebView from 'react-native-slim-web-view';

export default class App extends React.Component {

  componentDidMount = () =>
  {
    const log2 = () => {
      console.log(`componentDidMount `, " this.webviewRef.injectJS:  ", this.webviewRef.injectJavaScript);

    var jsOnDemand = `window.ReactNativeWebView.postMessage("999");`

      this.webviewRef.injectJavaScript(jsOnDemand);

    }

    setTimeout(log2, 2000)
  }

  render() {

    const url = "https://example.com";

    var js = `window.ReactNativeWebView.postMessage("I will be executed after page loads. I must be a string.")`;

    return (
      <>
        <View style={styles.v1}>

          <SlimWebView
            style={styles.v1}
            source={{uri: url}}
            userAgent={"Mozilla/5.0 (Android 4.4; Mobile; rv:46.0) Gecko/46.0 Firefox/46.0"}
            ref={ref => this.webviewRef = ref}
            
            onLoadEnd={(ev) => {
              console.log(`onLoadEnd ev.nativeEvent: `, ev.nativeEvent, " this.webviewRef.injectJS:  ", this.webviewRef.injectJavaScript);
            }}

            onMessage={(ev) => {
              /* sample ev.nativeEvent object:
    
              {"data": "string"} */

              console.log(`data from injectedJS (from native android SlimWebView): `, ev.nativeEvent)
            }}

            
            injectedJavaScript={js}
     
          />

        </View>
      </>
    );
  }
};