Merge branch 'master' of https://github.com/Jahans3/react-native-image-header-scroll-view into Jahans3-master

* 'master' of https://github.com/Jahans3/react-native-image-header-scroll-view: (23 commits)
  v0.0.85
  use animated overflow view for header
  add fixedForegroundContainerStyles prop
  v0.0.83
  revert overflow changes
  v0.0.82
  add new overflow view, bump package
  v0.0.81
  v0.0.8
  add more animated overflow views
  use overflow views
  add bottomOffset prop to triggeringview
  v0.0.6
  dont fade out foreground
  v0.0.5
  move ref
  v0.0.4
  pass ref callback
  always define transform
  version + package name
  ...

Author: Nhacsam

.gitignore

@@ -1,2 +1,3 @@
 node_modules/**/*
 npm-debug.*
+.idea

README.md

@@ -61,8 +61,9 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L96) |
 | `overlayColor` | `string` | `black` | Color of the overlay on the header | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L16) |
 | `useNativeDriver` | `boolean` | `false` | Use native driver for the animation for performance improvement. A few props are unsupported at the moment if `useNativeDriver=true` (`onScroll`, `ScrollComponent`, `renderTouchableFixedForeground`) | - |
-
-
+|`headerContainerStyle`|`Object`|`undefined`|Optional styles to be passed to the container of the header component|
+|`disableHeaderGrow`|`boolean`|`undefined`|Disable to grow effect on the header|
+|`disableOverlay`|`boolean`|`undefined`|Disable the image overlay|
 
 ### Foreground
 

package.json

@@ -8,7 +8,12 @@
     "test": "npm run lint && flow",
     "prettify": "prettier --write src/**.js"
   },
-  "files": ["README.md", "LICENCE", "src", "readmeAssets"],
+  "files": [
+    "README.md",
+    "LICENCE",
+    "src",
+    "readmeAssets"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bamlab/react-native-image-header-scroll-view.git"
@@ -42,7 +47,9 @@
     "react-native": ">=0.20.0"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-native-image-header-scroll-view-ep": "^0.0.8",
+    "react-native-view-overflow": "^0.0.3"
   },
   "eslintConfig": {
     "extends": "bambi/native"

src/ImageHeaderScrollView.js

@@ -2,9 +2,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, ScrollView, StyleSheet, View, Image, Dimensions } from 'react-native';
+import OverflowView from 'react-native-view-overflow';
 import type { ViewProps } from 'ViewPropTypes';
 import type { FlatList, SectionList, ListView } from 'react-native';
 
+const AnimatedOverflow = Animated.createAnimatedComponent(OverflowView);
+
 type ScrollViewProps = {
   onScroll?: ?Function,
   style?: $PropertyType<ViewProps, 'style'>,
@@ -43,6 +46,9 @@ export type Props = ScrollViewProps & {
   scrollViewBackgroundColor: string,
   headerImage?: ?SourceProps,
   useNativeDriver: ?boolean,
+  headerContainerStyle?: ?Object,
+  disableHeaderGrow?: ?boolean,
+  disableOverlay?: ?boolean,
 };
 
 export type DefaultProps = {
@@ -73,6 +79,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
 
   static defaultProps: DefaultProps = {
     overlayColor: 'black',
+    disableHeaderGrow: false,
     fadeOutForeground: false,
     foregroundParallaxRatio: 1,
     maxHeight: 125,
@@ -138,7 +145,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
 
     const headerTransformStyle = {
       height: this.props.maxHeight,
-      transform: [{ scale: headerScale }],
+      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,
     };
 
     const overlayStyle = [
@@ -147,11 +154,15 @@ class ImageHeaderScrollView extends Component<Props, State> {
     ];
 
     return (
-      <Animated.View style={[styles.header, headerTransformStyle]}>
+      <AnimatedOverflow
+        style={[styles.header, headerTransformStyle, this.props.headerContainerStyle]}
+      >
         {this.renderHeaderProps()}
-        <Animated.View style={overlayStyle} />
-        <View style={styles.fixedForeground}>{this.props.renderFixedForeground()}</View>
-      </Animated.View>
+        {!this.props.disableOverlay && <Animated.View style={overlayStyle} />}
+        <View style={[styles.fixedForeground, this.props.fixedForegroundContainerStyles]}>
+          {this.props.renderFixedForeground()}
+        </View>
+      </AnimatedOverflow>
     );
   }
 
@@ -161,12 +172,10 @@ class ImageHeaderScrollView extends Component<Props, State> {
       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,
     };
 
     if (!this.props.renderForeground) {
@@ -242,6 +251,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
       onScroll,
       scrollViewBackgroundColor,
       useNativeDriver,
+      getScrollViewRef,
       ...scrollViewProps
     } = this.props;
     /* eslint-enable no-unused-vars */
@@ -261,13 +271,21 @@ class ImageHeaderScrollView extends Component<Props, State> {
             backgroundColor: scrollViewBackgroundColor,
           },
         ]}
-        ref={ref => (this.container = ref)}
+        ref={ref => {
+          this.container = ref;
+        }}
         onLayout={this.onContainerLayout}
       >
         {this.renderHeader()}
         <ScrollViewComponent
-          ref={ref => (this.scrollViewRef = ref)}
           scrollEventThrottle={useNativeDriver ? 1 : 16}
+          ref={ref => {
+            if (getScrollViewRef) {
+              getScrollViewRef(ref);
+            }
+
+            this.scrollViewRef = ref;
+          }}
           overScrollMode="never"
           {...scrollViewProps}
           contentContainerStyle={[
@@ -305,6 +323,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
     }
     return responder.getScrollableNode();
   }
+
   getInnerViewNode(): any {
     const responder = this.getScrollResponder();
     if (!responder) {

src/TriggeringView.js

@@ -12,6 +12,7 @@ type Props = {
   onTouchBottom: Function,
   children?: React$Node,
   onLayout?: Function,
+  bottomOffset?: number,
 };
 
 type DefaultProps = {
@@ -21,6 +22,7 @@ type DefaultProps = {
   onDisplay: Function,
   onTouchTop: Function,
   onTouchBottom: Function,
+  bottomOffset: number,
 };
 
 type State = {
@@ -30,7 +32,7 @@ type State = {
 
 type Context = {
   scrollPageY?: number,
-  scrollY: Animated.Value,
+  scrollY: typeof Animated.Value,
 };
 
 class TriggeringView extends Component<Props, State> {
@@ -55,6 +57,7 @@ class TriggeringView extends Component<Props, State> {
     onDisplay: () => {},
     onTouchTop: () => {},
     onTouchBottom: () => {},
+    bottomOffset: 0,
   };
 
   constructor(props: Props) {
@@ -114,11 +117,11 @@ class TriggeringView extends Component<Props, State> {
       this.props.onTouchTop(false);
     }
 
-    if (!this.state.hidden && value >= bottom) {
+    if (!this.state.hidden && value >= bottom + this.props.bottomOffset) {
       this.setState({ hidden: true });
       this.props.onHide();
       this.props.onTouchBottom(true);
-    } else if (this.state.hidden && value < bottom) {
+    } else if (this.state.hidden && value < bottom + this.props.bottomOffset) {
       this.setState({ hidden: false });
       this.props.onBeginDisplayed();
       this.props.onTouchBottom(false);