# react-native-slim-web-view

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

Latest version **1.1.0** (published 2021-11-09) · 0 weekly downloads

## Install

```sh
npm install react-native-slim-web-view
pnpm add react-native-slim-web-view
yarn add react-native-slim-web-view
bun add react-native-slim-web-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-11-09 |
| First published | 2021-05-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | c2snpm |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-slim-web-view
- npm.io page: https://npm.io/package/react-native-slim-web-view

## Recent versions

- 1.1.0 (latest) — 2021-11-09
- 1.0.9 — 2021-05-02
- 1.0.5 — 2021-05-02
- 1.0.4 — 2021-05-02
- 1.0.3 — 2021-05-02
- 1.0.2 — 2021-05-02
- 1.0.1 — 2021-05-02
- 1.0.0 — 2021-05-02

## README

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

```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
```javascript
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>
      </>
    );
  }
};

```

---
_Source: https://npm.io/package/react-native-slim-web-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._