Make foreground tappable #6

Author: Nhacsam

example/Pages/BasicUsage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
+import { StyleSheet, Text, Image, TouchableOpacity, View, Dimensions } from 'react-native';
 import { NavigationBar } from '@exponent/ex-navigation';
 
 import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
@@ -28,6 +28,13 @@ class BasicUsage extends React.Component {
           renderHeader={() => (
             <Image source={require('../assets/NZ.jpg')} style={styles.image} />
           )}
+          renderForeground={() => (
+            <View style={{ height: 150, justifyContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} >
+                <Text style={{ backgroundColor: 'transparent' }}>Tap Me!</Text>
+              </TouchableOpacity>
+            </View>
+          )}
         >
           <View style={{ height: 1000 }}>
             <TriggeringView onHide={() => console.log('text hidden')} >

example/yarn.lock

@@ -2571,9 +2571,9 @@ react-native-drawer-layout@^1.0.0:
     autobind-decorator "^1.3.2"
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-image-header-scroll-view@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/react-native-image-header-scroll-view/-/react-native-image-header-scroll-view-0.4.0.tgz#aa3c8140ef1272434ca2883ba35c50d93f1abbd3"
+react-native-image-header-scroll-view@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-image-header-scroll-view/-/react-native-image-header-scroll-view-0.4.1.tgz#671b34c73f03a73cd923232b89aab19695d3b90d"
   dependencies:
     lodash "^4.17.4"
 

src/ImageHeaderScrollView.js

@@ -159,7 +159,6 @@ class ImageHeaderScrollView extends Component {
         onLayout={() => this.container.measureInWindow((x, y) => this.setState({ pageY: y }))}
       >
         { this.renderHeader() }
-        { this.renderForeground() }
         <Animated.View style={[styles.container, { transform: [{ translateY: topMargin }] }]}>
           <ScrollView
             ref={(ref) => { this[SCROLLVIEW_REF] = ref; }}
@@ -174,6 +173,7 @@ class ImageHeaderScrollView extends Component {
               {this.props.children}
             </Animated.View>
           </ScrollView>
+          { this.renderForeground() }
         </Animated.View>
       </View>
     );

src/__tests__/__snapshots__/TriggeringView.js.snap

@@ -50,25 +50,6 @@ exports[`TriggeringView renders correctly by default 1`] = `
     </View>
     <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
     style={
       Object {
@@ -105,6 +86,25 @@ exports[`TriggeringView renders correctly by default 1`] = `
           onLayout={[Function]} />
       </View>
     </ScrollView>
+    <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>
 </View>
 `;

src/__tests__/__snapshots__/index.js.snap

@@ -50,25 +50,6 @@ exports[`ImageHeaderScrollView renders correctly by default 1`] = `
     </View>
     <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
     style={
       Object {
@@ -101,6 +82,25 @@ exports[`ImageHeaderScrollView renders correctly by default 1`] = `
           }
         } />
     </ScrollView>
+    <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>
 </View>
 `;