react-native-autoheight-webview - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

autoHeightWebView/index.android.js

@@ -11,2 +11,3 @@ 'use strict'
     requireNativeComponent,
+    Animated,
     DeviceEventEmitter,
@@ -30,2 +31,5 @@ Dimensions,
         this.onMessage = this.onMessage.bind(this);
+        if (this.props.enableAnimation) {
+            this.opacityAnimatedValue = new Animated.Value(0);
+        }
         if (IsBelowKitKat) {
@@ -63,2 +67,5 @@ this.listenWebViewBridgeMessage = this.listenWebViewBridgeMessage.bind(this);
                 heightOffset: 0
+            }, () => {
+                this.startInterval();
+                this.setState({ isChangingSource: false });
             });
@@ -73,9 +80,9 @@ }
 
-    componentDidUpdate(prevProps, prevState) {
-        // redisplay webview when changing source
-        if (this.state.isChangingSource) {
-            this.startInterval();
-            this.setState({ isChangingSource: false });
-        }
-    }
+    // componentDidUpdate(prevProps, prevState) {
+    //     // redisplay webview when changing source
+    //     if (this.state.isChangingSource) {
+    //         this.startInterval();
+    //         this.setState({ isChangingSource: false });
+    //     }
+    // }
 
@@ -125,5 +132,14 @@ componentWillUnmount() {
 
+    onHeightUpdated(height) {
+        if (this.props.onHeightUpdated) {
+            this.props.onHeightUpdated(height);
+        }
+    }
+
     onMessage(e) {
         const height = parseInt(IsBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
         if (height) {
+            if (this.props.enableAnimation) {
+                this.opacityAnimatedValue.setValue(0);
+            }
             this.stopInterval();
@@ -133,6 +149,13 @@ this.setState({
                 height
+            }, () => {
+                if (this.props.enableAnimation) {
+                    Animated.timing(this.opacityAnimatedValue, {
+                        toValue: 1,
+                        duration: this.props.animationDuration
+                    }).start(() => this.onHeightUpdated(height));
+                }
+                else {
+                    this.onHeightUpdated(height);
+                }
             });
-            if (this.props.onHeightUpdated) {
-                this.props.onHeightUpdated(height);
-            }
         }
@@ -159,4 +182,4 @@ }
     render() {
-        const { height, script, isChangingSource } = this.state;
-        const { source, heightOffset, customScript, style, enableBaseUrl } = this.props;
+        const { height, script, isChangingSource, heightOffset } = this.state;
+        const { enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
         let webViewSource = source;
@@ -167,3 +190,4 @@ if (enableBaseUrl) {
         return (
-            <View style={[{
+            <Animated.View style={[{
+                opacity: enableAnimation ? this.opacityAnimatedValue : 1,
                 width: ScreenWidth,
@@ -185,8 +209,8 @@ height: height + heightOffset,
                             source={webViewSource}
+                            onMessage={this.onMessage}
+                            messagingEnabled={true}
                             // below kitkat
-                            onChange={this.onMessage}
-                            onMessage={this.onMessage}
-                            messagingEnabled={true} />
+                            onChange={this.onMessage} />
                 }
-            </View>
+            </Animated.View>
         );
@@ -197,2 +221,3 @@ }
 AutoHeightWebView.propTypes = {
+    enableAnimation: PropTypes.bool,
     source: WebView.propTypes.source,
@@ -215,2 +240,3 @@ onHeightUpdated: PropTypes.func,
 AutoHeightWebView.defaultProps = {
+    animationDuration: 555,
     enableBaseUrl: false,
@@ -217,0 +243,0 @@ heightOffset: 20

autoHeightWebView/index.ios.js

@@ -9,2 +9,3 @@ 'use strict'
 import {
+    Animated,
     Dimensions,
@@ -21,2 +22,5 @@ View,
         this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
+        if (this.props.enableAnimation) {
+            this.opacityAnimatedValue = new Animated.Value(0);
+        }
         const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
@@ -54,9 +58,25 @@ this.state = {
 
+    onHeightUpdated(height) {
+        if (this.props.onHeightUpdated) {
+            this.props.onHeightUpdated(height);
+        }
+    }
+
     handleNavigationStateChange(navState) {
         const height = Number(navState.title);
         if (height) {
-            this.setState({ height });
-            if (this.props.onHeightUpdated) {
-                this.props.onHeightUpdated(height);
+            if (this.props.enableAnimation) {
+                this.opacityAnimatedValue.setValue(0);
             }
+            this.setState({ height }, () => {
+                if (this.props.enableAnimation) {
+                    Animated.timing(this.opacityAnimatedValue, {
+                        toValue: 1,
+                        duration: this.props.animationDuration
+                    }).start(() => this.onHeightUpdated(height));
+                }
+                else {
+                    this.onHeightUpdated(height);
+                }
+            });
         }
@@ -67,6 +87,7 @@ }
         const { height, script } = this.state;
-        const { source, heightOffset, customScript, style } = this.props;
+        const { enableAnimation, source, heightOffset, customScript, style } = this.props;
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
         return (
-            <View style={[{
+            <Animated.View style={[{
+                opacity: enableAnimation ? this.opacityAnimatedValue : 1,
                 width: ScreenWidth,
@@ -85,3 +106,3 @@ height: height + heightOffset,
                     onNavigationStateChange={this.handleNavigationStateChange} />
-            </View>
+            </Animated.View>
         );
@@ -92,2 +113,5 @@ }
 AutoHeightWebView.propTypes = {
+    enableAnimation: PropTypes.bool,
+    // only works on enable animation
+    animationDuration: PropTypes.number,
     source: WebView.propTypes.source,
@@ -108,2 +132,3 @@ onHeightUpdated: PropTypes.func,
 AutoHeightWebView.defaultProps = {
+    animationDuration: 555,
     heightOffset: 12
@@ -110,0 +135,0 @@ }

package.json

 {
   "name": "react-native-autoheight-webview",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "An auto height webview for React Native",
@@ -5,0 +5,0 @@ "main": "autoHeightWebView",

README.md

@@ -10,4 +10,4 @@ # react-native-autoheight-webview
 ## showcase
-![react-native-autoheight-webview](https://media.giphy.com/media/xUA7bj3KScXHeom1I4/giphy.gif) 
-![react-native-autoheight-webview](https://media.giphy.com/media/xUA7b4xTJ4FYX3RuZq/giphy.gif)
+![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif) 
+![react-native-autoheight-webview android](https://media.giphy.com/media/xUPGcIO0a1ggESelfq/200w.gif)
 
@@ -18,2 +18,5 @@ # usage
 <AutoHeightWebView
+    enableAnimation={true},
+    // only works on enable animation
+    animationDuration={255},
     onHeightUpdated={height => console.log(height)}
@@ -20,0 +23,0 @@ // or uri

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83017

increased by2.51%

Lines of code

364

increased by15.56%

Number of lines in readme file

32

increased by10.34%

No dependency changes