react-native-parallax-swiper - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -11,6 +11,3 @@ import React, { Component, PropTypes } from 'react';
 
-const {
-  width: deviceWidth,
-  height: deviceHeight,
-} = Dimensions.get('window');
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
 
@@ -22,4 +19,2 @@ class ParallaxSwiper extends Component {
     const {
-      ui,
-      backgroundImages,
       backgroundColor,
@@ -30,2 +25,3 @@ dividerWidth,
       dividerColor,
+      children,
     } = this.props;
@@ -35,6 +31,3 @@
         <Animated.ScrollView
-          style={{
-            width: (deviceWidth + dividerWidth),
-            backgroundColor,
-          }}
+          style={{ width: (deviceWidth + dividerWidth), backgroundColor }}
           horizontal
@@ -52,35 +45,35 @@ pagingEnabled
           {
-            backgroundImages.map((uri, i) => {
+            React.Children.map(children, (child, i) => {
               return (
-                <View key={i} style={styles.slideOuterContainer}>
-                  <View style={styles.slideInnerContainer}>
-                    <Animated.Image
-                      style={[styles.backgroundImage, {
-                        left: i * -parallaxStrength,
-                        transform: [{
-                          translateX: this.state.animatedValue.interpolate({
-                            inputRange: [0, (deviceWidth + dividerWidth)],
-                            outputRange: [0, parallaxStrength],
-                          })
-                        }]
-                      }]}
-                      source={{ uri }}
+                  <View key={i} style={styles.slideOuterContainer}>
+                    <View style={styles.slideInnerContainer}>
+                      <Animated.Image
+                        style={[styles.backgroundImage, {
+                          left: i * -parallaxStrength,
+                          transform: [{
+                            translateX: this.state.animatedValue.interpolate({
+                              inputRange: [0, (deviceWidth + dividerWidth)],
+                              outputRange: [0, parallaxStrength],
+                            })
+                          }]
+                        }]}
+                        source={{ uri: child.props.backgroundImage }}
+                      />
+                      <View style={styles.uiContainer}>
+                        {child}
+                      </View>
+                    </View>
+                    <View
+                      style={[
+                        styles.divider,
+                        {
+                          width: dividerWidth,
+                          backgroundColor: (i !== children.length - 1) ?
+                            dividerColor
+                          :
+                            'transparent',
+                        }
+                      ]}
                     />
-                    <View style={styles.uiContainer}>
-                      {ui[i]}
-                    </View>
                   </View>
-                  <View
-                    style={[
-                      styles.divider,
-                      {
-                        width: dividerWidth,
-                        backgroundColor: (i !== backgroundImages.length - 1) ?
-                          dividerColor
-                        :
-                          'transparent',
-                      }
-                    ]}
-                  />
-                </View>
               );
@@ -117,4 +110,2 @@ })
 ParallaxSwiper.propTypes = {
-  ui: PropTypes.element,
-  backgroundImages: PropTypes.array.isRequired,
   backgroundColor: PropTypes.string,
@@ -121,0 +112,0 @@ dividerColor: PropTypes.string,

package.json

 {
   "name": "react-native-parallax-swiper",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Full Screen Parallax Swiper Allowing Arbitrary UI Injection",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # React Native Parallax Swiper
+
+## Add it to your project
+Run ```npm install react-native-parallax-swiper --save```
+
+
+## Usage
+```javascript
+import ParallaxSwiper from 'react-native-parallax-swiper';
+```
+
+```javascript
+<ParallaxSwiper
+  parallaxStrength={80}
+  dividerWidth={8}
+  dividerColor="white"
+  backgroundColor="#bae"
+  onMomentumScrollEnd={sweetFunction}
+>
+  <View style={styles.dopeStyles} backgroundImage={uri}>
+    {...arbitraryUI}
+  </View>
+</ParallaxSwiper>
+```
+
+## Props
+| Prop | Type | Description |
+|-----------------|----------|--------------------------------------------------------------|
+| parallaxStrength | number | how much parallax you want |
+| dividerWidth | number | width of slide divider |
+| dividerColor | string | color of slide divider |
+| backgroundColor | string | color of main scrollview background |
+| onMomentumScrollEnd | function | called when scrollview completed scrolling |
+
+## Copyright
+© 2017 Zach Gibson. Licensed under the MIT license.

No alert changes

Improved metrics

Total package byte prevSize

5100

increased by21.89%

Number of lines in readme file

37

increased by1750%

Worsened metrics

Lines of code

112

decreased by-7.44%

No dependency changes