Merge pull request #62 from RyverApp/feature/add-prop-for-extrapolation

Prop for foreground extrapolation

Author: Nhacsam

README.md

@@ -84,6 +84,7 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | -------- | ---- | ------- | ----------- | ------- |
 | `renderForeground` | `function` | Empty view | Function which return the component to use at foreground. The component is render in front of the header and scroll with the ScrollView. It can return a title for example.| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/TvShow.js#L112) |
 | `renderFixedForeground` | `function` | Empty view | Function which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay.| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L100) |
+| `foregroundExtrapolate` | `string` | `clamp` | Optional prop that allows override extrapolate mode for foreground. Use `null` to allow extrapolation, which is usefull for using foreground as bottom title | - |
 | `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) |

src/ImageHeaderScrollView.js

@@ -38,6 +38,7 @@ export type Props = ScrollViewProps & {
   renderFixedForeground: () => React$Element<any>,
   renderForeground?: () => React$Element<any>,
   renderHeader: () => React$Element<any>,
+  foregroundExtrapolate: ?string,
   renderTouchableFixedForeground?: ?() => React$Element<any>,
   ScrollViewComponent: React$ComponentType<ScrollViewProps>,
   scrollViewBackgroundColor: string,
@@ -58,6 +59,7 @@ export type DefaultProps = {
   minOverlayOpacity: number,
   renderFixedForeground: () => React$Element<any>,
   renderHeader: () => React$Element<any>,
+  foregroundExtrapolate: string,
   ScrollViewComponent: React$ComponentType<ScrollViewProps>,
   scrollViewBackgroundColor: string,
 };
@@ -84,6 +86,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
     minHeight: 80,
     minOverlayOpacity: 0,
     renderFixedForeground: () => <View />,
+    foregroundExtrapolate: 'clamp',
     renderHeader: () => <View />,
     ScrollViewComponent: ScrollView,
     scrollViewBackgroundColor: 'white',
@@ -169,7 +172,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
     const headerTranslate = this.state.scrollY.interpolate({
       inputRange: [0, this.props.maxHeight * 2],
       outputRange: [0, -this.props.maxHeight * 2 * this.props.foregroundParallaxRatio],
-      extrapolate: 'clamp',
+      extrapolate: this.props.foregroundExtrapolate,
     });
 
     const headerTransformStyle = {

src/index.d.ts

@@ -33,6 +33,7 @@ declare module "react-native-image-header-scroll-view" {
         renderFixedForeground?: () => React.ReactElement;
         renderForeground?: () => React.ReactElement;
         renderHeader?: () => React.ReactElement; // default is an empty view.
+        foregroundExtrapolate: ?string;
         renderTouchableFixedForeground?: () => React.ReactElement;
         ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
         scrollViewBackgroundColor?: string; // defaults to white.