Added new property that allow to specify headerMinHeight

kyaroru · Sep 22, 2017 · 550f32b · 550f32b
1 parent ce5c0b6
commit 550f32b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,8 @@ render() {
   return (
     <View style={styles.container}>
       <ReactNativeParallaxHeader
-        headerHeight={170}
+        headerMinHeight={120}
+        headerMaxHeight={170}
         extraScrollHeight={20}
         navbarColor={Colors.primary}
         title={'Parallax Header :p'}
@@ -59,11 +60,12 @@ render() {
 | -------- | ---- | -------- | ----------- | ------- |
 | `renderNavBar` | `func` | No | This renders the nav bar component | Empty `<View />` |
 | `renderContent` | `func` | **YES** | This renders the scroll view content | - |
-| `headerHeight` | `number` | No | This is the header maximum height | Default to `200` |
+| `headerMaxHeight` | `number` | No | This is the header maximum height | Default to `200` |
+| `headerMinHeight` | `number` | No | This is the header minimum height | Default to common ios & android navbar height (have support for iPhone X too :p) |
+| `backgroundImage` | `image source` | No | This renders the background image of the header (**if specified, background color will not take effect**) | Default is `null` |
+| `backgroundImageScale` | `number` | No | This is the image scale - either enlarge or shrink (after scrolling to bottom & exceed the headerMaxHeight) | Default is `1.5` |
 | `backgroundColor` | `string` | No | This is the color of the parallax background (before scrolling up), **will not be used if `backgroundImage` is specified** | Default color is `#303F9F` |
-| `backgroundImage` | `image source` | No | This renders the background image of the header | Default is `null` |
-| `backgroundImageScale` | `number` | No | This is the image scale (after scrolling to bottom & exceed the headerHeight) | Default is `1.5` |
-| `extraScrollHeight` | `number` | No | This is the extra scroll height (after scrolling to bottom & exceed the headerHeight) | Default is `50` |
+| `extraScrollHeight` | `number` | No | This is the extra scroll height (after scrolling to bottom & exceed the headerMaxHeight) | Default is `50` |
 | `navbarColor` | `string` | No | This is the background color of the navbar (after scroll up) | Default color is `3498db` |
 | `title` | `string` | No | This is the title to be display in the header | Default is empty string `‘’` | 
 | `titleStyle` | `style` | No | This is the title style to override default font size/color | Default to `color: ‘white’ `text and `fontSize: 16` |

diff --git a/index.js b/index.js
@@ -66,7 +66,6 @@ const styles = StyleSheet.create({
   },
   headerTitle: {
     backgroundColor: 'transparent',
-    height: DEFAULT_HEADER_MIN_HEIGHT,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -90,9 +89,14 @@ class RNParallax extends Component {
     };
   }
 
+  getHeaderMinHeight() {
+    const { headerMinHeight } = this.props;
+    return headerMinHeight;
+  }
+
   getHeaderScrollDistance() {
-    const { headerHeight } = this.props;
-    return headerHeight - DEFAULT_HEADER_MIN_HEIGHT;
+    const { headerMaxHeight } = this.props;
+    return headerMaxHeight - this.getHeaderMinHeight();
   }
 
   getExtraScrollHeight() {
@@ -105,50 +109,53 @@ class RNParallax extends Component {
     return backgroundImageScale;
   }
 
+  getInputRange() {
+    return [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance()];
+  }
+
   getHeaderHeight() {
-    const { headerHeight } = this.props;
+    const { headerMaxHeight } = this.props;
     return this.state.scrollY.interpolate({
-      inputRange: [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance()],
-      outputRange: [headerHeight + this.getExtraScrollHeight(), headerHeight, DEFAULT_HEADER_MIN_HEIGHT],
+      inputRange: this.getInputRange(),
+      outputRange: [headerMaxHeight + this.getExtraScrollHeight(), headerMaxHeight, this.getHeaderMinHeight()],
       extrapolate: 'clamp',
     });
   }
 
   getImageOpacity() {
     return this.state.scrollY.interpolate({
-      inputRange: [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance() / 2, this.getHeaderScrollDistance()],
-      outputRange: [1, 1, 1, 0],
+      inputRange: this.getInputRange(),
+      outputRange: [1, 1, 0],
       extrapolate: 'clamp',
     });
   }
 
   getImageTranslate() {
     return this.state.scrollY.interpolate({
-      inputRange: [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance()],
+      inputRange: this.getInputRange(),
       outputRange: [this.getExtraScrollHeight(), 0, -50],
       extrapolate: 'clamp',
     });
   }
 
   getImageScale() {
     return this.state.scrollY.interpolate({
-      inputRange: [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance()],
+      inputRange: this.getInputRange(),
       outputRange: [this.getBackgroundImageScale(), 1, 1],
       extrapolate: 'clamp'
     });
   }
 
   getTitleTranslate() {
     return this.state.scrollY.interpolate({
-      inputRange: [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance() / 2, this.getHeaderScrollDistance()],
-      outputRange: [5, 0, 0, Platform.OS === 'ios' ? -2 : 0],
+      inputRange: this.getInputRange(),
+      outputRange: [5, 0, 0],
       extrapolate: 'clamp',
     });
   }
 
   renderHeaderTitle() {
     const { title, titleStyle } = this.props;
-    const headerHeight = this.getHeaderHeight();
     const titleTranslate = this.getTitleTranslate();
 
     return (
@@ -159,7 +166,7 @@ class RNParallax extends Component {
             transform: [
               { translateY: titleTranslate },
             ],
-            height: headerHeight,
+            height: this.getHeaderHeight(),
           },
         ]}
       >
@@ -173,14 +180,14 @@ class RNParallax extends Component {
   renderHeaderForeground() {
     const { renderNavBar } = this.props;
     return (
-      <Animated.View style={styles.bar}>
+      <Animated.View style={[styles.bar, { height: this.getHeaderMinHeight() }]}>
         {renderNavBar()}
       </Animated.View>
     );
   }
 
   renderBackgroundImage() {
-    const { headerHeight, backgroundImage } = this.props;
+    const { headerMaxHeight, backgroundImage } = this.props;
     const imageOpacity = this.getImageOpacity();
     const imageTranslate = this.getImageTranslate();
     const imageScale = this.getImageScale();
@@ -190,9 +197,9 @@ class RNParallax extends Component {
         style={[
           styles.backgroundImage,
           {
+            height: headerMaxHeight,
             opacity: imageOpacity,
             transform: [{ translateY: imageTranslate }, { scale: imageScale }],
-            height: headerHeight,
           },
         ]}
         source={backgroundImage}
@@ -201,15 +208,15 @@ class RNParallax extends Component {
   }
 
   renderPlainBackground() {
-    const { headerHeight, backgroundColor } = this.props;
+    const { headerMaxHeight, backgroundColor } = this.props;
     const imageOpacity = this.getImageOpacity();
     const imageTranslate = this.getImageTranslate();
     const imageScale = this.getImageScale();
 
     return (
       <Animated.View
         style={{
-          height: headerHeight,
+          height: headerMaxHeight,
           backgroundColor,
           opacity: imageOpacity,
           transform: [{ translateY: imageTranslate }, { scale: imageScale }],
@@ -220,14 +227,13 @@ class RNParallax extends Component {
 
   renderHeaderBackground() {
     const { backgroundImage, navbarColor } = this.props;
-    const headerHeight = this.getHeaderHeight();
 
     return (
       <Animated.View
         style={[
           styles.header,
           {
-            height: headerHeight,
+            height: this.getHeaderHeight(),
             backgroundColor: navbarColor,
           },
         ]}
@@ -239,7 +245,7 @@ class RNParallax extends Component {
   }
 
   render() {
-    const { renderContent, headerHeight, scrollEventThrottle } = this.props;
+    const { renderContent, headerMaxHeight, scrollEventThrottle } = this.props;
     return (
       <View style={styles.container}>
         <Animated.ScrollView
@@ -249,7 +255,7 @@ class RNParallax extends Component {
             [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
           )}
         >
-          <View style={[styles.scrollViewContent, { marginTop: headerHeight }]}>
+          <View style={[styles.scrollViewContent, { marginTop: headerMaxHeight }]}>
             {renderContent()}
           </View>
         </Animated.ScrollView>
@@ -269,7 +275,8 @@ RNParallax.propTypes = {
   navbarColor: PropTypes.string,
   title: PropTypes.string,
   titleStyle: PropTypes.number,
-  headerHeight: PropTypes.number,
+  headerMaxHeight: PropTypes.number,
+  headerMinHeight: PropTypes.number,
   scrollEventThrottle: PropTypes.number,
   extraScrollHeight: PropTypes.number,
   backgroundImageScale: PropTypes.number,
@@ -282,7 +289,8 @@ RNParallax.defaultProps = {
   backgroundImage: null,
   title: '',
   titleStyle: styles.headerText,
-  headerHeight: DEFAULT_HEADER_MAX_HEIGHT,
+  headerMaxHeight: DEFAULT_HEADER_MAX_HEIGHT,
+  headerMinHeight: DEFAULT_HEADER_MIN_HEIGHT,
   scrollEventThrottle: SCROLL_EVENT_THROTTLE,
   extraScrollHeight: DEFAULT_EXTRA_SCROLL_HEIGHT,
   backgroundImageScale: DEFAULT_BACKGROUND_IMAGE_SCALE,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-parallax-header",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A react native scroll view component with Parallax header :p",
   "main": "index.js",
   "scripts": {