import React, { Component, PropTypes } from 'react';
import {
  View,
  ScrollView,
  Image,
  Animated,
  StyleSheet,
  Dimensions,
} from 'react-native';

const {
  width: deviceWidth,
  height: deviceHeight,
} = Dimensions.get('window');

class ParallaxSwiper extends Component {
  state = { animatedValue: new Animated.Value(0) };

  render() {
    const {
      ui,
      backgroundImages,
      backgroundColor,
      dividerWidth,
      parallaxStrength,
      showsHorizontalScrollIndicator,
      dividerColor,
    } = this.props;

    return (
        <Animated.ScrollView
          style={{
            width: (deviceWidth + dividerWidth),
            backgroundColor,
          }}
          horizontal
          pagingEnabled
          scrollEventThrottle={1}
          onScroll={Animated.event([{
            nativeEvent: { contentOffset: { x: this.state.animatedValue } },
          }],
            { useNativeDriver: true }
          )}
          showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
          onMomentumScrollEnd={this.props.onMomentumScrollEnd}
        >
          {
            backgroundImages.map((uri, 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 style={styles.uiContainer}>
                      {ui[i]}
                    </View>
                  </View>
                  <View
                    style={[
                      styles.divider,
                      {
                        width: dividerWidth,
                        backgroundColor: (i !== backgroundImages.length - 1) ?
                          dividerColor
                        :
                          'transparent',
                      }
                    ]}
                  />
                </View>
              );
            })
          }
      </Animated.ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  slideOuterContainer: {
    flexDirection: 'row',
  },
  slideInnerContainer: {
    overflow: 'hidden',
    width: deviceWidth,
  },
  backgroundImage: {
    position: 'absolute',
    width: deviceWidth,
    height: deviceHeight,
  },
  uiContainer: {
    width: deviceWidth,
    height: deviceHeight,
  },
  divider: {
    height: deviceHeight,
  },
});

ParallaxSwiper.propTypes = {
  ui: PropTypes.element,
  backgroundImages: PropTypes.array.isRequired,
  backgroundColor: PropTypes.string,
  dividerColor: PropTypes.string,
  dividerWidth: PropTypes.number,
  parallaxStrength: PropTypes.number,
  showsHorizontalScrollIndicator: PropTypes.bool,
};

ParallaxSwiper.defaultProps = {
  backgroundColor: 'black',
  dividerColor: 'black',
  dividerWidth: 8,
  parallaxStrength: 80,
  showsHorizontalScrollIndicator: false,
};

export default ParallaxSwiper;

@@ -157,18 +157,16 @@
 %0Aconst %7B
-%0A 
  width: 
@@ -177,18 +177,16 @@
 ceWidth,
-%0A 
  height:
@@ -198,18 +198,17 @@
 ceHeight
-,%0A
+ 
 %7D = Dime
@@ -353,42 +353,8 @@
 t %7B%0A
-      ui,%0A      backgroundImages,%0A
     
@@ -470,24 +470,40 @@
 viderColor,%0A
+      children,%0A
     %7D = this
@@ -571,28 +571,16 @@
 style=%7B%7B
-%0A           
  width: 
@@ -608,28 +608,16 @@
 rWidth),
-%0A           
  backgro
@@ -624,27 +624,16 @@
 undColor
-,%0A         
  %7D%7D%0A    
@@ -1062,33 +1062,43 @@
     
-backgroundImages.map((uri
+React.Children.map(children, (child
 , i)
@@ -1138,24 +1138,26 @@
             
+ 
+ 
 %3CView key=%7Bi
@@ -1204,32 +1204,34 @@
                 
+  
 %3CView style=%7Bsty
@@ -1248,32 +1248,34 @@
 nnerContainer%7D%3E%0A
+  
                 
@@ -1308,32 +1308,34 @@
                 
+  
 style=%7B%5Bstyles.b
@@ -1376,16 +1376,18 @@
         
+  
 left: i 
@@ -1427,24 +1427,26 @@
             
+ 
+ 
 transform: %5B
@@ -1447,16 +1447,18 @@
 orm: %5B%7B%0A
+  
         
@@ -1526,16 +1526,18 @@
 olate(%7B%0A
+  
         
@@ -1631,16 +1631,18 @@
         
+  
 outputRa
@@ -1687,32 +1687,34 @@
                 
+  
 %7D)%0A             
@@ -1728,11 +1728,15 @@
     
+ 
+ 
 %7D%5D%0A
+  
     
@@ -1779,16 +1779,18 @@
         
+  
 source=%7B
@@ -1794,20 +1794,51 @@
 e=%7B%7B uri
+: child.props.backgroundImage
  %7D%7D%0A
+  
         
@@ -1844,32 +1844,34 @@
              /%3E%0A
+  
                 
@@ -1934,14 +1934,16 @@
     
+ 
-%7Bui%5Bi%5D
+ %7Bchild
 %7D%0A  
@@ -1956,32 +1956,34 @@
             
+ 
+ 
 %3C/View%3E%0A
             
@@ -1962,32 +1962,34 @@
         %3C/View%3E%0A
+  
                 
@@ -1990,32 +1990,34 @@
         %3C/View%3E%0A
+  
                 
@@ -2036,32 +2036,34 @@
                 
+  
 style=%7B%5B%0A       
@@ -2055,16 +2055,18 @@
 tyle=%7B%5B%0A
+  
         
@@ -2109,34 +2109,38 @@
                 
-%7B%0A
+  %7B%0A  
                 
@@ -2188,24 +2188,26 @@
             
+  
 backgroundCo
@@ -2218,32 +2218,24 @@
  (i !== 
-backgroundImages
+children
 .length 
@@ -2241,16 +2241,18 @@
  - 1) ?%0A
+  
         
@@ -2306,16 +2306,18 @@
         
+  
 :%0A      
@@ -2336,16 +2336,18 @@
         
+ 
+ 
 'transpa
@@ -2371,26 +2371,30 @@
             
-%7D%0A
+  %7D%0A  
             
@@ -2414,35 +2414,39 @@
                 
+  
 /%3E%0A
+  
                 
@@ -2965,81 +2965,8 @@
 = %7B%0A
-  ui: PropTypes.element,%0A  backgroundImages: PropTypes.array.isRequired,%0A
   ba

Use children props to pass data to component so composing the component and UI isn’t insanity