Merge pull request #14 from bamlab/fix-button

Nhacsam · web-flow · commit daa50bb114ca · 2017-06-04T15:16:36.000+02:00
Add a touchableFixedForeground
diff --git a/README.md b/README.md
@@ -63,9 +63,10 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | Property | Type | Default | Description |
 | -------- | ---- | ------- | ----------- |
 | `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.|
-| `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. Perfect for navbar content.|
+| `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.|
 | `foregroundParallaxRatio` | `number` | `1` | Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll |
 | `fadeOutForeground` | `bool` | `false` | If set, add a fade out effect on the foreground when scroll up |
+| `renderFixedForeground` | `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)|
 
 
 ### TriggeringView
diff --git a/example/Pages/Avignon.js b/example/Pages/Avignon.js
@@ -0,0 +1,75 @@
+import React from 'react';
+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';
+
+const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+const MAX_HEIGHT = 200;
+
+class BasicUsage extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <HeaderImageScrollView
+          maxHeight={MAX_HEIGHT}
+          minHeight={MIN_HEIGHT}
+          minOverlayOpacity={0.4}
+          renderHeader={() => (
+            <Image source={require('../assets/avignon.jpg')} style={styles.image} />
+          )}
+          renderTouchableFixedForeground={() => (
+            <View style={{ height: MAX_HEIGHT, justifyContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
+                <Text style={styles.buttonText}>Discover Avignon now!</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        >
+          <View style={{ height: 1000 }}>
+            <TriggeringView onHide={() => console.log('text hidden')}>
+              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
+                <Text style={styles.buttonText}>Discover Another city</Text>
+              </TouchableOpacity>
+            </TriggeringView>
+          </View>
+        </HeaderImageScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: -MIN_HEIGHT,
+    flex: 1,
+  },
+  image: {
+    height: MAX_HEIGHT,
+    width: Dimensions.get('window').width,
+  },
+  button: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    borderColor: 'white',
+    backgroundColor: '#00000066',
+  },
+  buttonText: {
+    color: 'white',
+    backgroundColor: 'transparent',
+  },
+});
+
+BasicUsage.route = {
+  navigationBar: {
+    tintColor: 'white',
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0,
+    statusBarHeight: 0,
+    elevation: 0,
+  },
+};
+
+export default BasicUsage;
diff --git a/example/Pages/Menu.js b/example/Pages/Menu.js
@@ -1,5 +1,14 @@
 import React from 'react';
-import { StyleSheet, Text, Image, TouchableOpacity, StatusBar, View, Dimensions } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  Image,
+  TouchableOpacity,
+  StatusBar,
+  View,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
 import { withNavigation } from '@exponent/ex-navigation';
 import { Router } from '../main';
 
@@ -8,6 +17,8 @@ import tvShowContent from '../assets/tvShowContent';
 const styles = StyleSheet.create({
   page: {
     flex: 1,
+  },
+  pageContent: {
     alignItems: 'stretch',
     padding: 30,
   },
@@ -29,20 +40,22 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
     justifyContent: 'center',
     alignItems: 'center',
-  }
+  },
 });
 
-@withNavigation
-class Button extends React.Component {
+@withNavigation class Button extends React.Component {
   render() {
     const props = this.props;
     return (
-      <TouchableOpacity activeOpacity={0.7} onPress={() => {
-        this.props.navigator.push(Router.getRoute(props.target));
-      }}>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={() => {
+          this.props.navigator.push(Router.getRoute(props.target));
+        }}
+      >
         <Image style={styles.button} source={props.image}>
           <View style={styles.overlay}>
-            <Text style={styles.buttonText}>{ props.text }</Text>
+            <Text style={styles.buttonText}>{props.text}</Text>
           </View>
         </Image>
       </TouchableOpacity>
@@ -51,12 +64,13 @@ class Button extends React.Component {
 }
 
 const Menu = () => (
-  <View style={styles.page}>
+  <ScrollView style={styles.page} contentContainerStyle={styles.pageContent}>
     <StatusBar />
     <Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
     <Button image={tvShowContent.image} text="TV Show" target="tvShow" />
     <Button image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
-  </View>
+    <Button image={require('../assets/avignon.jpg')} text="Forms and buttons" target="avignon" />
+  </ScrollView>
 );
 
 Menu.route = {
diff --git a/example/Pages/index.js b/example/Pages/index.js
@@ -2,3 +2,4 @@ export { default as Menu } from './Menu';
 export { default as TvShow } from './TvShow';
 export { default as BasicUsage } from './BasicUsage';
 export { default as ColorsPage } from './Colors';
+export { default as Avignon } from './Avignon';
diff --git a/example/assets/avignon.jpg b/example/assets/avignon.jpg
diff --git a/example/main.js b/example/main.js
@@ -1,23 +1,16 @@
 import React from 'react';
-import {
-  AppRegistry,
-  Text,
-  View,
-} from 'react-native';
+import { AppRegistry, Text, View } from 'react-native';
 
-import {
-  createRouter,
-  NavigationProvider,
-  StackNavigation,
-} from '@exponent/ex-navigation';
+import { createRouter, NavigationProvider, StackNavigation } from '@exponent/ex-navigation';
 
-import { Menu, TvShow, BasicUsage, ColorsPage } from './Pages';
+import { Menu, TvShow, BasicUsage, ColorsPage, Avignon } from './Pages';
 
 export const Router = createRouter(() => ({
   menu: () => Menu,
   tvShow: () => TvShow,
   basicUsage: () => BasicUsage,
   colors: () => ColorsPage,
+  avignon: () => Avignon,
 }));
 
 class App extends React.Component {
diff --git a/example/package.json b/example/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "imageHeaderScrollView",
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"private": true,
 	"scripts": {
 		"start": "node node_modules/react-native/local-cli/cli.js start"
@@ -11,7 +11,7 @@
 		"react": "~15.4.1",
 		"react-native": "0.42.0",
 		"react-native-animatable": "^1.1.0",
-		"react-native-image-header-scroll-view": "^0.5.1"
+		"react-native-image-header-scroll-view": "^0.6.0"
 	},
 	"devDependencies": {
 		"babel-jest": "19.0.0",
diff --git a/example/yarn.lock b/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.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/react-native-image-header-scroll-view/-/react-native-image-header-scroll-view-0.5.1.tgz#d2ab403c3aa220e502760c39a452bac47e38e155"
+react-native-image-header-scroll-view@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-image-header-scroll-view/-/react-native-image-header-scroll-view-0.6.0.tgz#3cf08955dd3615b5852824b993d9ad60ba1f5bfc"
   dependencies:
     lodash "^4.17.4"
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-image-header-scroll-view",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "ScrollView with an image in header which become a navbar",
   "main": "src/index.js",
   "scripts": {
diff --git a/src/ImageHeaderScrollView.js b/src/ImageHeaderScrollView.js
@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
-import {
-  Animated,
-  ScrollView,
-  StyleSheet,
-  View,
-  } from 'react-native';
+import { Animated, ScrollView, StyleSheet, View } from 'react-native';
 import _ from 'lodash';
 
 const SCROLLVIEW_REF = 'ScrollView';
@@ -40,9 +35,11 @@ const styles = StyleSheet.create({
     bottom: 0,
     zIndex: 101,
   },
+  touchableFixedForeground: {
+    zIndex: 102,
+  },
 });
 
-
 class ImageHeaderScrollView extends Component {
   constructor(props) {
     super(props);
@@ -79,7 +76,7 @@ class ImageHeaderScrollView extends Component {
     this.getScrollResponder().scrollTo(...args);
   }
 
-  interpolateOnImageHeight(outputRange) {
+  interpolateOnImageHeight(outputRange: Array<number>) {
     const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
     return this.state.scrollY.interpolate({
       inputRange: [0, headerScrollDistance],
@@ -112,11 +109,11 @@ class ImageHeaderScrollView extends Component {
 
     return (
       <Animated.View style={[styles.header, headerTransformStyle]}>
+        {this.props.renderHeader(this.state.scrollY)}
         <Animated.View style={overlayStyle} />
         <View style={styles.fixedForeground}>
-          { this.props.renderFixedForeground(this.state.scrollY) }
+          {this.props.renderFixedForeground(this.state.scrollY)}
         </View>
-        { this.props.renderHeader(this.state.scrollY) }
       </Animated.View>
     );
   }
@@ -136,7 +133,32 @@ class ImageHeaderScrollView extends Component {
     };
     return (
       <Animated.View style={[styles.header, headerTransformStyle]}>
-        { this.props.renderForeground() }
+        {this.props.renderForeground()}
+      </Animated.View>
+    );
+  }
+
+  renderTouchableFixedForeground() {
+    if (!this.props.renderTouchableFixedForeground) {
+      return <View />;
+    }
+
+    const height = this.interpolateOnImageHeight([this.props.maxHeight, this.props.minHeight]);
+
+    const headerScale = this.state.scrollY.interpolate({
+      inputRange: [-this.props.maxHeight, 0],
+      outputRange: [3, 1],
+      extrapolate: 'clamp',
+    });
+
+    const headerTransformStyle = {
+      height,
+      transform: [{ scale: headerScale }],
+    };
+
+    return (
+      <Animated.View style={[styles.header, styles.touchableFixedForeground, headerTransformStyle]}>
+        {this.props.renderTouchableFixedForeground(this.state.scrollY)}
       </Animated.View>
     );
   }
@@ -159,26 +181,29 @@ class ImageHeaderScrollView extends Component {
     return (
       <View
         style={styles.container}
-        ref={(ref) => { this.container = ref; }}
+        ref={ref => (this.container = ref)}
         onLayout={() => this.container.measureInWindow((x, y) => this.setState({ pageY: y }))}
       >
-        { this.renderHeader() }
+        {this.renderHeader()}
         <Animated.View style={[styles.container, { transform: [{ translateY: topMargin }] }]}>
           <ScrollView
-            ref={(ref) => { this[SCROLLVIEW_REF] = ref; }}
+            ref={ref => (this[SCROLLVIEW_REF] = ref)}
             style={styles.container}
+            onStartShouldSetResponder={() => false}
+            onMoveShouldSetResponder={() => false}
             scrollEventThrottle={16}
-            onScroll={Animated.event(
-              [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
-            )}
+            onScroll={Animated.event([
+              { nativeEvent: { contentOffset: { y: this.state.scrollY } } },
+            ])}
             {...scrollViewProps}
           >
             <Animated.View style={childrenContainerStyle}>
               {this.props.children}
             </Animated.View>
           </ScrollView>
-          { this.renderForeground() }
         </Animated.View>
+        {this.renderTouchableFixedForeground()}
+        {this.renderForeground()}
       </View>
     );
   }
@@ -197,6 +222,7 @@ ImageHeaderScrollView.propTypes = {
   renderFixedForeground: React.PropTypes.func,
   renderForeground: React.PropTypes.func,
   renderHeader: React.PropTypes.func,
+  renderTouchableFixedForeground: React.PropTypes.func,
   ...ScrollView.propTypes,
 };
 
diff --git a/src/__tests__/__snapshots__/TriggeringView.js.snap b/src/__tests__/__snapshots__/TriggeringView.js.snap
diff --git a/src/__tests__/__snapshots__/index.js.snap b/src/__tests__/__snapshots__/index.js.snap

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-image-header-scroll-view",`
`3`		`- "version": "0.5.1",`
	`3`	`+ "version": "0.6.0",`
`4`	`4`	`"description": "ScrollView with an image in header which become a navbar",`
`5`	`5`	`"main": "src/index.js",`
`6`	`6`	`"scripts": {`