Add foreground prop

Author: Nhacsam

demo.gif

@@ -1,3 +1,4 @@
 node_modules/**/*
 .exponent/*
 npm-debug.*
+ImageHeaderScrollView.js

exemple/.gitignore

@@ -17,12 +17,20 @@ const TvShow = () => (
   <View style={{ flex:1 }}>
     <StatusBar barStyle="light-content" />
     <HeaderImageScrollView
-      maxHeight={200}
+      maxHeight={250}
       minHeight={66}
+      maxOverlayOpacity={0.6}
+      minOverlayOpacity={0.3}
+      fadeOutForeground
       renderHeader={() => (
         <Image source={tvShowContent.image} style={styles.image} />
       )}
-      >
+      renderForeground={() => (
+        <View style={styles.titleContainer}>
+          <Text style={styles.imageTitle}>{tvShowContent.title}</Text>
+        </View>
+      )}
+    >
       <View style={styles.section}>
         <Text style={styles.title}>
           <Text style={styles.name}>{tvShowContent.title}</Text>, ({tvShowContent.year})
@@ -48,7 +56,7 @@ const TvShow = () => (
 
 const styles = StyleSheet.create({
   image: {
-    height: 200,
+    height: 250,
     width: Dimensions.get('window').width,
     alignSelf: 'stretch',
     resizeMode: 'cover',
@@ -88,6 +96,17 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: 'white',
   },
+  titleContainer: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imageTitle: {
+    color: 'white',
+    backgroundColor: 'transparent',
+    fontSize: 24,
+  }
 });
 
 Exponent.registerRootComponent(TvShow);

exemple/main.js

@@ -51,5 +51,24 @@ exports[`test renders correctly by default 1`] = `
       } />
     <View />
   </View>
+  <View
+    style={
+      Object {
+        "height": 125,
+        "left": 0,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
+      }
+    }>
+    <View />
+  </View>
 </View>
 `;

src/__tests__/__snapshots__/index.js.snap

@@ -1,11 +1,13 @@
 import React from 'react';
 import 'react-native';
-import ImageHeaderScrollView from '../index.js';
 import renderer from 'react-test-renderer';
+import ImageHeaderScrollView from '../index.js';
 
-it('renders correctly by default', () => {
-  const tree = renderer.create(
-    <ImageHeaderScrollView />
-  ).toJSON();
-  expect(tree).toMatchSnapshot();
+describe('ImageHeaderScrollView', () => {
+  it('renders correctly by default', () => {
+    const tree = renderer.create(
+      <ImageHeaderScrollView />,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/__tests__/index.js

@@ -55,7 +55,10 @@ class ImageHeaderScrollView extends Component {
       this.props.maxHeight,
       this.props.minHeight,
     ]);
-    const overlayOpacity = this.interpolateOnImageHeight([0, this.props.maxOverlayOpacity]);
+    const overlayOpacity = this.interpolateOnImageHeight([
+      this.props.minOverlayOpacity,
+      this.props.maxOverlayOpacity,
+    ]);
 
     const headerScale = this.state.scrollY.interpolate({
       inputRange: [-this.props.maxHeight, 0],
@@ -72,6 +75,26 @@ class ImageHeaderScrollView extends Component {
     );
   }
 
+  renderForeground() {
+    const headerTranslate = this.state.scrollY.interpolate({
+      inputRange: [0, this.props.maxHeight * 2],
+      outputRange: [0, -this.props.maxHeight * 2 * this.props.foregroundParallaxRatio],
+      extrapolate: 'clamp',
+    });
+    const opacity = this.interpolateOnImageHeight([1, -0.3]);
+
+    const headerTransformStyle = {
+      height: this.props.maxHeight,
+      transform: [{ translateY: headerTranslate }],
+      opacity: this.props.fadeOutForeground ? opacity : 1,
+    };
+    return (
+      <Animated.View style={[styles.header, headerTransformStyle]}>
+        { this.props.renderForeground() }
+      </Animated.View>
+    );
+  }
+
   render() {
     return (
       <View style={styles.container}>
@@ -87,25 +110,34 @@ class ImageHeaderScrollView extends Component {
           </Animated.View>
         </ScrollView>
         { this.renderHeader() }
+        { this.renderForeground() }
       </View>
     );
   }
 }
 
 ImageHeaderScrollView.propTypes = {
   renderHeader: React.PropTypes.func,
+  renderForeground: React.PropTypes.func,
   maxHeight: React.PropTypes.number,
   minHeight: React.PropTypes.number,
   children: React.PropTypes.node || React.PropTypes.nodes,
   maxOverlayOpacity: React.PropTypes.number,
+  minOverlayOpacity: React.PropTypes.number,
   childrenStyle: View.propTypes.style,
+  foregroundParallaxRatio: React.PropTypes.number,
+  fadeOutForeground: React.PropTypes.bool,
 };
 
 ImageHeaderScrollView.defaultProps = {
   maxHeight: 125,
   minHeight: 80,
   maxOverlayOpacity: 0.3,
+  minOverlayOpacity: 0,
   renderHeader: () => <View />,
+  renderForeground: () => <View />,
+  foregroundParallaxRatio: 1,
+  fadeOutForeground: false,
 };
 
 export default ImageHeaderScrollView;