Merge pull request #56 from bamlab/Jahans3-master

Jahans3 master

Author: Nhacsam

.gitignore

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

README.md

@@ -61,8 +61,8 @@ 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|
 
 ### Foreground
 
@@ -73,6 +73,7 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | `foregroundParallaxRatio` | `number` | `1` | Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L23) |
 | `fadeOutForeground` | `bool` | `false` | If set, add a fade out effect on the foreground when scroll up | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L13) |
 | `renderTouchableFixedForeground` | `function` | Empty view | Same as `renderFixedForeground` but allow to use touchable in it. [*Can cause performances issues on Android*](https://github.com/bamlab/react-native-image-header-scroll-view/issues/6)| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/PullToRefresh.js#L45) |
+|`fixedForegroundContainerStyles`|`Object`|`undefined`| Optional styles to be passed to the container of the fixed foreground component|
 
 ### Mixed
 
@@ -98,7 +99,39 @@ All of the properties of `View` are supported.
 | `onDisplay` | `function` | Called when the component finished to be displayed again. |
 | `onTouchTop` | `function` | Called when the Top of the component touch the Top of the ScrollView. (`onDisplay` + `onBeginHidden`) |
 | `onTouchBottom` | `function` | Called when the Bottom of the component touch the Top of the ScrollView. (`onHide` + `onBeginDisplayed`) |
-### Contributing
+
+
+
+## FAQ
+
+### How to remove the black image overlay
+
+Just set the `maxOverlayOpacity` to `0`.
+
+```jsx 
+<HeaderImageScrollView
+  minOverlayOpacity={0}
+  maxOverlayOpacity={0}
+  {/* ... */}
+/>
+
+```
+
+### How to remove the image zomming on scroll down
+
+You have two solutions : 
+
+1. You can use the `disableHeaderGrow` props. It will keep the ios elastic scroll effect.
+2. You can also use the `bounces={false}` props [from the scroll view](https://facebook.github.io/react-native/docs/scrollview#bounces). 
+
+Results : 
+
+| `disableHeaderGrow` | `bounces={false}` | 
+| ------------------- | ----------------- | 
+![react-native-image-header-scroll-view demo disableHeaderGrow](./readmeAssets/demoDisableHeaderGrow.gif)|![react-native-image-header-scroll-view demo bounces](./readmeAssets/demoBounces.gif)
+
+
+## Contributing
 
 All contributions are welcomed, that might be either adding new features, doing some refaco of the exisiting code or fixing bugs. 
 
@@ -107,8 +140,9 @@ All contributions are welcomed, that might be either adding new features, doing
 1. Fork the project & clone locally. Follow the initial setup here.
 2. Create a branch, naming it either a feature or bug: git checkout -b feature/that-new-feature or bug/fixing-that-bug
 3. Code and commit your changes. Write a good commit message. Best would be to use git [commitizen](https://github.com/commitizen/cz-cli)
-4. Push to the branch: git push origin feature/that-new-feature
-5. Create a pull request for your branch 🎉
+4. Test your changes in the [example repository](https://github.com/bamlab/react-native-image-header-scroll-view-example)
+5. Push to the branch: git push origin feature/that-new-feature
+6. Create a pull request for your branch 🎉
 
 
 ## Other open-source modules by the folks at [BAM](http://github.com/bamlab)

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"

readmeAssets/demoBounces.gif

@@ -43,6 +43,9 @@ export type Props = ScrollViewProps & {
   scrollViewBackgroundColor: string,
   headerImage?: ?SourceProps,
   useNativeDriver: ?boolean,
+  headerContainerStyle?: ?Object,
+  fixedForegroundContainerStyles?: ?Object,
+  disableHeaderGrow?: ?boolean,
 };
 
 export type DefaultProps = {
@@ -73,6 +76,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
 
   static defaultProps: DefaultProps = {
     overlayColor: 'black',
+    disableHeaderGrow: false,
     fadeOutForeground: false,
     foregroundParallaxRatio: 1,
     maxHeight: 125,
@@ -138,19 +142,25 @@ class ImageHeaderScrollView extends Component<Props, State> {
 
     const headerTransformStyle = {
       height: this.props.maxHeight,
-      transform: [{ scale: headerScale }],
+      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,
     };
 
     const overlayStyle = [
       styles.overlay,
       { opacity: overlayOpacity, backgroundColor: this.props.overlayColor },
     ];
 
+    const disableOverlay =
+      this.props.minOverlayOpacity === this.props.maxOverlayOpacity &&
+      this.props.maxOverlayOpacity === 0;
+
     return (
-      <Animated.View style={[styles.header, headerTransformStyle]}>
+      <Animated.View style={[styles.header, headerTransformStyle, this.props.headerContainerStyle]}>
         {this.renderHeaderProps()}
-        <Animated.View style={overlayStyle} />
-        <View style={styles.fixedForeground}>{this.props.renderFixedForeground()}</View>
+        {!disableOverlay && <Animated.View style={overlayStyle} />}
+        <View style={[styles.fixedForeground, this.props.fixedForegroundContainerStyles]}>
+          {this.props.renderFixedForeground()}
+        </View>
       </Animated.View>
     );
   }
@@ -161,12 +171,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) {
@@ -261,13 +269,17 @@ 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 => {
+            this.scrollViewRef = ref;
+          }}
           overScrollMode="never"
           {...scrollViewProps}
           contentContainerStyle={[
@@ -305,6 +317,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
     }
     return responder.getScrollableNode();
   }
+
   getInnerViewNode(): any {
     const responder = this.getScrollResponder();
     if (!responder) {

readmeAssets/demoDisableHeaderGrow.gif

@@ -12,6 +12,8 @@ type Props = {
   onTouchBottom: Function,
   children?: React$Node,
   onLayout?: Function,
+  bottomOffset?: number,
+  topOffset?: number,
 };
 
 type DefaultProps = {
@@ -21,6 +23,8 @@ type DefaultProps = {
   onDisplay: Function,
   onTouchTop: Function,
   onTouchBottom: Function,
+  bottomOffset: number,
+  topOffset: number,
 };
 
 type State = {
@@ -55,6 +59,8 @@ class TriggeringView extends Component<Props, State> {
     onDisplay: () => {},
     onTouchTop: () => {},
     onTouchBottom: () => {},
+    bottomOffset: 0,
+    topOffset: 0,
   };
 
   constructor(props: Props) {
@@ -104,21 +110,22 @@ class TriggeringView extends Component<Props, State> {
   };
 
   triggerEvents(value: number, top: number, bottom: number) {
-    if (!this.state.touched && value >= top) {
+    const { bottomOffset, topOffset } = this.props;
+    if (!this.state.touched && value >= top + topOffset) {
       this.setState({ touched: true });
       this.props.onBeginHidden();
       this.props.onTouchTop(true);
-    } else if (this.state.touched && value < top) {
+    } else if (this.state.touched && value < top + topOffset) {
       this.setState({ touched: false });
       this.props.onDisplay();
       this.props.onTouchTop(false);
     }
 
-    if (!this.state.hidden && value >= bottom) {
+    if (!this.state.hidden && value >= bottom + 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 + bottomOffset) {
       this.setState({ hidden: false });
       this.props.onBeginDisplayed();
       this.props.onTouchBottom(false);