use overflow views

Author: Joshua Jahans

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-image-header-scroll-view-ep",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "ScrollView with an image in header which become a navbar",
   "main": "src/index.js",
   "scripts": {
@@ -47,7 +47,8 @@
     "react-native": ">=0.20.0"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "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 ViewOverflow from 'react-native-view-overflow';
 import type { ViewProps } from 'ViewPropTypes';
 import type { FlatList, SectionList, ListView } from 'react-native';
 
+const AnimatedViewOverflow = Animated.createAnimatedComponent(ViewOverflow);
+
 type ScrollViewProps = {
   onScroll?: ?Function,
   style?: $PropertyType<ViewProps, 'style'>,
@@ -150,11 +153,11 @@ class ImageHeaderScrollView extends Component<Props, State> {
     ];
 
     return (
-      <Animated.View style={[styles.header, headerTransformStyle, this.props.headerContainerStyle]}>
+      <AnimatedViewOverflow style={[styles.header, headerTransformStyle, this.props.headerContainerStyle]}>
         {this.renderHeaderProps()}
         {!this.props.disableOverlay && <Animated.View style={overlayStyle} />}
         <View style={styles.fixedForeground}>{this.props.renderFixedForeground()}</View>
-      </Animated.View>
+      </AnimatedViewOverflow>
     );
   }
 
@@ -175,9 +178,9 @@ class ImageHeaderScrollView extends Component<Props, State> {
     }
 
     return (
-      <Animated.View style={[styles.header, headerTransformStyle]}>
+      <AnimatedViewOverflow style={[styles.header, headerTransformStyle]}>
         {this.props.renderForeground()}
-      </Animated.View>
+      </AnimatedViewOverflow>
     );
   }
 
@@ -189,9 +192,9 @@ class ImageHeaderScrollView extends Component<Props, State> {
     }
 
     return (
-      <Animated.View style={[styles.header, styles.touchableFixedForeground, { height }]}>
+      <AnimatedViewOverflow style={[styles.header, styles.touchableFixedForeground, { height }]}>
         {this.props.renderTouchableFixedForeground()}
-      </Animated.View>
+      </AnimatedViewOverflow>
     );
   }
 

yarn.lock

@@ -3344,6 +3344,10 @@ react-devtools-core@3.0.0:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-native-view-overflow@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/react-native-view-overflow/-/react-native-view-overflow-0.0.3.tgz#d7b08e8c1e5047a2cf07f3ece82025899f930674"
+
 react-native@0.52.2:
   version "0.52.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.52.2.tgz#1ae9a4c4441bd6e54a8ffc8aae4ac2b5c7cccd68"