autoheightwebview; disable scrollbar in android webview;

.gitignore

@@ -0,0 +1,42 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+*.iml
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+

android/build.gradle

@@ -0,0 +1,32 @@
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
+        exclude group: 'com.android.support', module: 'support-annotations'
+    })
+    compile 'com.android.support:appcompat-v7:25.0.1'
+    compile "com.facebook.react:react-native:+"  // From node_modules
+    testCompile 'junit:junit:4.12'
+}

android/proguard-rules.pro

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /Users/iou90/Library/Android/sdk/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

android/src/androidTest/java/com/dscj/autoheightwebview/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.dscj.autoheightwebview;
+
+import android.content.Context;
+import android.support.test.InstrumentationRegistry;
+import android.support.test.runner.AndroidJUnit4;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static org.junit.Assert.*;
+
+/**
+ * Instrumentation test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getTargetContext();
+
+        assertEquals("com.dscj.autoheightwebview.test", appContext.getPackageName());
+    }
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,11 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.dscj.autoheightwebview">
+
+    <application android:allowBackup="true"
+                 android:label="@string/app_name"
+                 android:supportsRtl="true"
+    >
+
+    </application>
+
+</manifest>

android/src/main/java/com/dscj/autoheightwebview/AutoHeightWebViewManager.java

@@ -0,0 +1,27 @@
+package com.dscj.autoheightwebview;
+
+import android.webkit.WebView;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.webview.ReactWebViewManager;
+
+/**
+ * Created by iou90 on 09/01/2017.
+ */
+
+public class AutoHeightWebViewManager extends ReactWebViewManager {
+    private static final String REACT_CLASS = "RCTAutoHeightWebView";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected WebView createViewInstance(ThemedReactContext reactContext) {
+        WebView webview = super.createViewInstance(reactContext);
+        webview.setVerticalScrollBarEnabled(false);
+        webview.setHorizontalScrollBarEnabled(false);
+        return webview;
+    }
+}

android/src/main/java/com/dscj/autoheightwebview/AutoHeightWebViewPackage.java

@@ -0,0 +1,34 @@
+package com.dscj.autoheightwebview;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * Created by iou90 on 09/01/2017.
+ */
+
+public class AutoHeightWebViewPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
+        return new ArrayList<>();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
+        return Arrays.<ViewManager>asList(
+                new AutoHeightWebViewManager()
+        );
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Arrays.asList();
+    }
+}

android/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">RCTAutoHeightWebView</string>
+</resources>

android/src/test/java/com/dscj/autoheightwebview/ExampleUnitTest.java

@@ -0,0 +1,17 @@
+package com.dscj.autoheightwebview;
+
+import org.junit.Test;
+
+import static org.junit.Assert.*;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

autoHeightWebView/index.android.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import React, {
+    Component,
+    PropTypes
+} from 'react';
+
+import {
+    requireNativeComponent,
+    View,
+    WebView
+} from 'react-native';
+
+export default class AutoHeightWebView extends Component {
+    constructor(props) {
+        super(props);
+        this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
+        const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
+        this.state = {
+            height: 0,
+            script: initialScript
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        let currentScript = BaseScript;
+        if ((nextProps.files && !this.props.files) || (nextProps.files && this.props.files && JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files))) {
+            currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
+        }
+        this.setState({ script: currentScript });
+    }
+
+    appendFilesToHead(files, script) {
+        if (!files) {
+            return script;
+        }
+        for (let file of files) {
+            script =
+                `
+                var link  = document.createElement('link');
+                link.rel  = '` + file.rel + `';
+                link.type = '` + file.type + `';
+                link.href = '` + file.href + `';
+                document.head.appendChild(link);
+                `+ script;
+        }
+        return script;
+    }
+
+    handleNavigationStateChange(navState) {
+        const height = Number(navState.title);
+        this.setState({ height });
+        if (this.props.onHeightUpdated) {
+            this.props.onHeightUpdated(height);
+        }
+    }
+
+    render() {
+        const source = this.props.enableBaseUrl ? {
+            html: this.props.html,
+            baseUrl: 'file:///android_asset/web/'
+        } : { html: this.props.html };
+        return (
+            <View style={[{
+                height: this.state.height + this.props.heightOffset
+            }, this.props.style]}>
+                <RCTAutoHeightWebView
+                    injectedJavaScript={this.state.script + this.props.customScript}
+                    scrollEnabled={false}
+                    source={source}
+                    onNavigationStateChange={this.handleNavigationStateChange} />
+            </View>
+        );
+    }
+}
+
+AutoHeightWebView.propTypes = {
+    html: PropTypes.string,
+    onHeightUpdated: PropTypes.func,
+    customScript: PropTypes.string,
+    style: View.propTypes.style,
+    // offset rn webview margin
+    heightOffset: PropTypes.number,
+    // baseUrl not work in android 4.3 or below version
+    enableBaseUrl: PropTypes.bool,
+    // add web/files... to android/app/src/assets/
+    files: PropTypes.arrayOf(PropTypes.shape({
+        href: PropTypes.string,
+        type: PropTypes.string,
+        rel: PropTypes.string
+    }))
+}
+
+const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView);
+
+const BaseScript =
+    `
+    ; (function () {
+        var wrapper = document.createElement('div');
+        wrapper.id = 'height-wrapper';
+        while (document.body.firstChild) {
+            wrapper.appendChild(document.body.firstChild);
+        }
+        document.body.appendChild(wrapper);
+        var i = 0;
+        function updateHeight() {
+            document.title = wrapper.clientHeight;
+            window.location.hash = ++i;
+        }
+        updateHeight();
+        window.addEventListener('load', function () {
+            updateHeight();
+        });
+        window.addEventListener('resize', updateHeight);
+    } ());
+    `;

autoHeightWebView/index.ios.js

@@ -0,0 +1,114 @@
+'use strict'
+
+import React, {
+    Component,
+    PropTypes
+} from 'react';
+
+import {
+    View,
+    WebView
+} from 'react-native';
+
+export default class AutoHeightWebView extends Component {
+    constructor(props) {
+        super(props);
+        this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
+        const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
+        this.state = {
+            height: 0,
+            script: initialScript
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        let currentScript = BaseScript;
+        if ((nextProps.files && !this.props.files) || (nextProps.files && this.props.files && JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files))) {
+            currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
+        }
+        this.setState({ script: currentScript });
+    }
+
+    appendFilesToHead(files, script) {
+        if (!files) {
+            return script;
+        }
+        for (let file of files) {
+            script =
+                `
+                var link  = document.createElement('link');
+                link.rel  = '` + file.rel + `';
+                link.type = '` + file.type + `';
+                link.href = '` + file.href + `';
+                document.head.appendChild(link);
+                `+ script;
+        }
+        return script;
+    }
+
+    handleNavigationStateChange(navState) {
+        const height = Number(navState.title);
+        this.setState({ height });
+        if (this.props.onHeightUpdated) {
+            this.props.onHeightUpdated(height);
+        }
+    }
+
+    render() {
+        return (
+            <View style={[{
+                height: this.state.height + this.props.heightOffset,
+            }, this.props.style]}>
+                <WebView
+                    injectedJavaScript={this.state.script + this.props.customScript}
+                    scrollEnabled={false}
+                    source={{
+                        html: this.props.html,
+                        baseUrl: 'web/'
+                    }}
+                    onNavigationStateChange={this.handleNavigationStateChange} />
+            </View>
+        );
+    }
+}
+
+AutoHeightWebView.propTypes = {
+    html: PropTypes.string,
+    onHeightUpdated: PropTypes.func,
+    customScript: PropTypes.string,
+    // offset rn webview margin
+    heightOffset: PropTypes.number,
+    style: View.propTypes.style,
+    // add web/files... to project root
+    files: PropTypes.arrayOf(PropTypes.shape({
+        href: PropTypes.string,
+        type: PropTypes.string,
+        rel: PropTypes.string
+    }))
+}
+
+AutoHeightWebView.defaultProps = {
+    heightOffset: 12
+}
+
+const BaseScript =
+    `
+    ; (function () {
+        var wrapper = document.createElement('div');
+        wrapper.id = 'height-wrapper';
+        while (document.body.firstChild) {
+            wrapper.appendChild(document.body.firstChild);
+        }
+        document.body.appendChild(wrapper);
+        var i = 0;
+        function updateHeight() {
+            document.title = wrapper.clientHeight;
+            window.location.hash = ++i;
+        }
+        updateHeight();
+        window.addEventListener('load', function () {
+            updateHeight();
+        });
+        window.addEventListener('resize', updateHeight);
+    } ());
+    `;

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-native-autoheightwebview",
+  "version": "0.0.1",
+  "description": "An auto height webview for React Native",
+  "main": "autoHeightWebView",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iou90/react-native-autoheightwebview.git"
+  },
+  "author": "iou90",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/iou90/react-native-autoheightwebview/issues"
+  },
+  "homepage": "https://github.com/iou90/react-native-autoheightwebview#readme"
+}