react-native-snow - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

package.json

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

README.md

@@ -37,2 +37,12 @@ # react-native-snow
 
+# Props
+```
+Snow.propTypes = {
+  // Specify color of snowflakes.
+  snowflakesStyle: { color: 'blue' },
+  // Specify amount of snowflakes present ('light', 'medium')
+  snowfall: 'medium',
+};
+```
+
 # Thanks
@@ -39,0 +49,0 @@

src/Snow.js

@@ -7,2 +7,4 @@ import React, { Component } from 'react';
 } from 'react-native';
+import { oneOf, shape, string } from 'prop-types';
+import { lightSnowflakes, mediumSnowflakes } from '../config/snowflakeStrategies';
 import Snowflake from './Snowflake';
@@ -14,14 +16,23 @@
   render() {
+    const { snowfall, snowflakesStyle } = this.props;
+    const snowflakes = snowfall === 'medium' ? mediumSnowflakes : lightSnowflakes;
     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">
+        {
+          snowflakes.map((snowflake, i) => {
+            const { glyph, size, offset, fallDelay, shakeDelay } = snowflake;
+            return (
+              <Snowflake
+                key={`snowflake-${i}`}
+                glyph={glyph}
+                size={size}
+                offset={offset}
+                fallDelay={fallDelay}
+                shakeDelay={shakeDelay}
+                style={snowflakesStyle}
+              />
+            );
+          })
+        }
+      </View>
     );
@@ -31,2 +42,13 @@ }
 
+Snow.propTypes = {
+  snowfall: oneOf(['light', 'medium']),
+  snowflakesStyle: shape({
+    color: string,
+  }),
+};
+
+Snow.defaultProps = {
+  snowfall: 'light',
+};
+
 const styles = StyleSheet.create({
@@ -33,0 +55,0 @@ view: {

src/Snowflake.js

 import React, { Component } from 'react';
 import {
   StyleSheet,
-  Text,
-  View,
   Dimensions,
@@ -11,6 +9,7 @@ Animated,
 } from 'react-native';
-import PropTypes from 'prop-types';
+import PropTypes, { shape } from 'prop-types';
 
-const topOffset = Dimensions.get('window').height * .1;
-const windowHeight = Dimensions.get('window').height + topOffset;
+const HEIGHT = Dimensions.get('window').height;
+const topOffset = HEIGHT * .1;
+const windowHeight = HEIGHT + topOffset;
 
@@ -126,2 +125,3 @@ export default class Snowflake extends Component {
   render() {
+    const { style } = this.props;
     const translateX = this.state.translateX.interpolate({
@@ -142,3 +142,3 @@ inputRange: [0, 1],
         transform: [{translateX}, {translateY}]
-      }]}>
+      }, style]}>
         {this.state.glyph}
@@ -160,2 +160,5 @@ </Animated.Text>
   shakeDelay: PropTypes.number,
+  style: shape({
+    color: PropTypes.string,
+  }),
 };
@@ -162,0 +165,0 @@

No alert changes

Improved metrics

Total package byte prevSize

11268

increased by28.66%

Number of package files

6

increased by20%

Lines of code

241

increased by28.19%

Number of lines in readme file

52

increased by23.81%

No dependency changes