react-native-snow - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "react-native-snow",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Fullscreen snow overlay component for react native",
@@ -5,0 +5,0 @@ "main": "./src/Snow.js",

README.md

@@ -9,3 +9,30 @@ # react-native-snow
 
+# Usage
+To use, install the npm module:
+```
+npm install --save react-native-snow
+```
 
+Then import the Snow component:
+```
+import Snow from 'react-native-snow';
+```
+
+Then add it anywhere in your JSX (you should only do this in one place!):
+```
+export default class App extends Component<{}> {
+  render() {
+    return (
+      <View>
+        ...
+        <Snow />
+        ...
+      </View>
+    );
+  }
+}
+```
+
+<img src="https://github.com/ryanoboril/react-native-snow/blob/master/Example/screenshots/android.png" width="250" height="444" /> | <img src="https://github.com/ryanoboril/react-native-snow/blob/master/Example/screenshots/ios.png" width="250" height="444" />
+
 # Thanks
@@ -12,0 +39,0 @@

src/Snow.js

 import React, { Component } from 'react';
 import {
   StyleSheet,
-  Text,
   View,
   Dimensions,
-  Animated,
-  Easing,
 } from 'react-native';
@@ -18,67 +15,13 @@ import PropTypes from 'prop-types';
     return (
-      <View style={styles.view} pointerEvents="none">
-        <Snowflake
-          glyph='❆'
-          size={14}
-          offset='1%'
-          fallDelay={0}
-          shakeDelay={0}
-        />
-        <Snowflake
-          glyph='❅'
-          size={24}
-          offset='5%'
-          fallDelay={1000}
-          shakeDelay={1000}
-        />
-        <Snowflake
-          glyph='❆'
-          size={14}
-          offset='10%'
-          fallDelay={6000}
-          shakeDelay={500}
-        />
-        <Snowflake
-          glyph='❅'
-          size={18}
-          offset='15%'
-          fallDelay={4000}
-          shakeDelay={2000}
-        />
-        <Snowflake
-          glyph='❆'
-          size={14}
-          offset='20%'
-          fallDelay={2000}
-          shakeDelay={2000}
-        />
-        <Snowflake
-          glyph='❆'
-          size={24}
-          offset='25%'
-          fallDelay={8000}
-          shakeDelay={3000}
-        />
-        <Snowflake
-          glyph='❆'
-          size={14}
-          offset='30%'
-          fallDelay={6000}
-          shakeDelay={2000}
-        />
-        <Snowflake
-          glyph='❅'
-          size={18}
-          offset='35%'
-          fallDelay={2500}
-          shakeDelay={1000}
-        />
-        <Snowflake
-          glyph='❆'
-          size={14}
-          offset='40%'
-          fallDelay={3000}
-          shakeDelay={1500}
-        />
-      </View>
+        <View style={styles.view} pointerEvents="none">
+          <Snowflake glyph='❆' size={14} offset='1%' fallDelay={0} shakeDelay={0} />
+          <Snowflake glyph='❅' size={24} offset='5%' fallDelay={1000} shakeDelay={1000} />
+          <Snowflake glyph='❆' size={14} offset='10%' fallDelay={6000} shakeDelay={500} />
+          <Snowflake glyph='❅' size={18} offset='15%' fallDelay={4000} shakeDelay={2000} />
+          <Snowflake glyph='❆' size={14} offset='20%' fallDelay={2000} shakeDelay={2000} />
+          <Snowflake glyph='❆' size={24} offset='25%' fallDelay={8000} shakeDelay={3000} />
+          <Snowflake glyph='❆' size={14} offset='30%' fallDelay={6000} shakeDelay={2000} />
+          <Snowflake glyph='❅' size={18} offset='35%' fallDelay={2500} shakeDelay={1000} />
+          <Snowflake glyph='❆' size={14} offset='40%' fallDelay={3000} shakeDelay={1500} />
+        </View>
     );
@@ -91,4 +34,4 @@ }
     flexDirection: 'row',
-    zIndex: 999,
-    elevation: 999,
+    zIndex: 9999,
+    elevation: 9999,
     position: 'absolute',
@@ -102,2 +45,1 @@ top: 0,
 });
-

src/Snowflake.js

@@ -9,2 +9,3 @@ import React, { Component } from 'react';
   Easing,
+  AppState
 } from 'react-native';
@@ -16,2 +17,6 @@ import PropTypes from 'prop-types';
 export default class Snowflake extends Component {
+
+  _fallAnimation = null;
+  _shakeAnimation = null;
+
   constructor(props) {
@@ -32,46 +37,90 @@ super(props);
       translateX: new Animated.Value(0),
+      appState: AppState.currentState,
     };
   }
 
-  componentDidMount() {
-    setTimeout( () => {
-      Animated.loop(
+  _handleAppStateChange = (nextAppState) => {
+    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
+      // App is coming into foreground
+      this._initAnimation();
+    }
+    if (this.state.appState.match(/^active|foreground/) && nextAppState === 'inactive') {
+      // App is going into background
+      this._stopAnimation();
+    }
+    this.setState({appState: nextAppState});
+  }
+
+  _stopAnimation() {
+    if (this._fallAnimation) {
+      this._fallAnimation.stop();
+      this._fallAnimation = null;
+      this.setState({
+        translateY: new Animated.Value(0),
+      });
+    }
+
+    if (this._shakeAnimation) {
+      this._shakeAnimation.stop();
+      this._shakeAnimation = null;
+      this.setState({
+        translateX: new Animated.Value(0),
+      });
+    }
+  }
+
+  _initAnimation() {
+    this._fallAnimation = Animated.loop(
+      Animated.timing(
+        this.state.translateY,
+        {
+          toValue: 1,
+          easing: Easing.linear,
+          duration: this.state.fallDuration,
+          useNativeDriver: true,
+        }
+      )
+    );
+
+    this._shakeAnimation = Animated.loop(
+      Animated.sequence([
         Animated.timing(
-          this.state.translateY,
+          this.state.translateX,
           {
             toValue: 1,
-            easing: Easing.linear,
-            duration: this.state.fallDuration,
+            easing: Easing.easeInOutSine,
+            duration: this.state.shakeDuration / 2,
             useNativeDriver: true,
           }
+        ),
+        Animated.timing(
+          this.state.translateX,
+          {
+            toValue: 0,
+            easing: Easing.easeInOutSine,
+            duration: this.state.shakeDuration / 2,
+            useNativeDriver: true,
+          }
         )
-      ).start();
+      ])
+    );
+
+    setTimeout( () => {
+      this._fallAnimation && this._fallAnimation.start();
     }, this.state.fallDelay);
 
     setTimeout( () => {
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(
-            this.state.translateX,
-            {
-              toValue: 1,
-              easing: Easing.easeInOutSine,
-              duration: this.state.shakeDuration / 2,
-              useNativeDriver: true,
-            }
-          ),
-          Animated.timing(
-            this.state.translateX,
-            {
-              toValue: 0,
-              easing: Easing.easeInOutSine,
-              duration: this.state.shakeDuration / 2,
-              useNativeDriver: true,
-            }
-          )
-        ])
-      ).start();
+      this._shakeAnimation && this._shakeAnimation.start();
     }, this.state.shakeDelay);
   }
 
+  componentDidMount() {
+    AppState.addEventListener('change', this._handleAppStateChange);
+    this._initAnimation();
+  }
+
+  componentWillUnmount() {
+    AppState.removeEventListener('change', this._handleAppStateChange);
+  }
+
   render() {
@@ -78,0 +127,0 @@ const translateX = this.state.translateX.interpolate({

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

8770

increased by18.34%

Number of lines in readme file

42

increased by180%

Worsened metrics

Lines of code

188

decreased by-8.29%

No dependency changes