Code Refactoring and release 1.0.5

kyaroru · Oct 3, 2017 · 6f4be39 · 6f4be39
1 parent 3f69850
commit 6f4be39
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ render() {
 | `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` |
 | `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` |
+| `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` |
 | `scrollEventThrottle` | `number` | No | This is the scroll event throttle | Default is `16` |

diff --git a/index.js b/index.js
@@ -44,9 +44,6 @@ const styles = StyleSheet.create({
     backgroundColor: DEFAULT_NAVBAR_COLOR,
     overflow: 'hidden',
   },
-  scrollViewContent: {
-    marginTop: DEFAULT_HEADER_MAX_HEIGHT,
-  },
   backgroundImage: {
     position: 'absolute',
     top: 0,
@@ -89,14 +86,18 @@ class RNParallax extends Component {
     };
   }
 
+  getHeaderMaxHeight() {
+    const { headerMaxHeight } = this.props;
+    return headerMaxHeight;
+  }
+
   getHeaderMinHeight() {
     const { headerMinHeight } = this.props;
     return headerMinHeight;
   }
 
   getHeaderScrollDistance() {
-    const { headerMaxHeight } = this.props;
-    return headerMaxHeight - this.getHeaderMinHeight();
+    return this.getHeaderMaxHeight() - this.getHeaderMinHeight();
   }
 
   getExtraScrollHeight() {
@@ -110,14 +111,21 @@ class RNParallax extends Component {
   }
 
   getInputRange() {
-    return [-this.getExtraScrollHeight(), 0, this.getHeaderScrollDistance()];
+    return [-this.getExtraScrollHeight(), 0,  this.getHeaderScrollDistance()];
   }
 
   getHeaderHeight() {
-    const { headerMaxHeight } = this.props;
     return this.state.scrollY.interpolate({
       inputRange: this.getInputRange(),
-      outputRange: [headerMaxHeight + this.getExtraScrollHeight(), headerMaxHeight, this.getHeaderMinHeight()],
+      outputRange: [this.getHeaderMaxHeight() + this.getExtraScrollHeight(), this.getHeaderMaxHeight(), this.getHeaderMinHeight()],
+      extrapolate: 'clamp',
+    });
+  }
+
+  getNavBarOpacity() {
+    return this.state.scrollY.interpolate({
+      inputRange: this.getInputRange(),
+      outputRange: [0, 1, 1],
       extrapolate: 'clamp',
     });
   }
@@ -133,7 +141,7 @@ class RNParallax extends Component {
   getImageTranslate() {
     return this.state.scrollY.interpolate({
       inputRange: this.getInputRange(),
-      outputRange: [this.getExtraScrollHeight(), 0, -50],
+      outputRange: [0, 0, -50],
       extrapolate: 'clamp',
     });
   }
@@ -179,15 +187,23 @@ class RNParallax extends Component {
 
   renderHeaderForeground() {
     const { renderNavBar } = this.props;
+
     return (
-      <Animated.View style={[styles.bar, { height: this.getHeaderMinHeight() }]}>
+      <Animated.View
+        style={[
+          styles.bar,
+          {
+            height: this.getHeaderMinHeight(),
+          }
+        ]}
+      >
         {renderNavBar()}
       </Animated.View>
     );
   }
 
   renderBackgroundImage() {
-    const { headerMaxHeight, backgroundImage } = this.props;
+    const { backgroundImage } = this.props;
     const imageOpacity = this.getImageOpacity();
     const imageTranslate = this.getImageTranslate();
     const imageScale = this.getImageScale();
@@ -197,7 +213,7 @@ class RNParallax extends Component {
         style={[
           styles.backgroundImage,
           {
-            height: headerMaxHeight,
+            height: this.getHeaderMaxHeight(),
             opacity: imageOpacity,
             transform: [{ translateY: imageTranslate }, { scale: imageScale }],
           },
@@ -208,15 +224,16 @@ class RNParallax extends Component {
   }
 
   renderPlainBackground() {
-    const { headerMaxHeight, backgroundColor } = this.props;
+    const { backgroundColor } = this.props;
+
     const imageOpacity = this.getImageOpacity();
     const imageTranslate = this.getImageTranslate();
     const imageScale = this.getImageScale();
 
     return (
       <Animated.View
         style={{
-          height: headerMaxHeight,
+          height: this.getHeaderMaxHeight(),
           backgroundColor,
           opacity: imageOpacity,
           transform: [{ translateY: imageTranslate }, { scale: imageScale }],
@@ -225,16 +242,36 @@ class RNParallax extends Component {
     );
   }
 
+  renderNavbarBackground() {
+    const { navbarColor } = this.props;
+    const navBarOpacity = this.getNavBarOpacity();
+
+    return (
+      <Animated.View
+        style={[
+          styles.header,
+          {
+            height: this.getHeaderHeight(),
+            backgroundColor: navbarColor,
+            opacity: navBarOpacity,
+          },
+        ]}
+      />
+    );
+  }
+
   renderHeaderBackground() {
-    const { backgroundImage, navbarColor } = this.props;
+    const { backgroundImage, backgroundColor } = this.props;    
+    const imageOpacity = this.getImageOpacity();
 
     return (
       <Animated.View
         style={[
           styles.header,
           {
             height: this.getHeaderHeight(),
-            backgroundColor: navbarColor,
+            opacity: imageOpacity,
+            backgroundColor: backgroundImage ? 'transparent' : backgroundColor,
           },
         ]}
       >
@@ -244,24 +281,32 @@ class RNParallax extends Component {
     );
   }
 
+  renderScrollView() {
+    const { renderContent, scrollEventThrottle } = this.props;
+
+    return (
+      <Animated.ScrollView
+        style={styles.scrollView}
+        scrollEventThrottle={scrollEventThrottle}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
+        )}
+      >
+        <View style={{ marginTop: this.getHeaderMaxHeight() }}>
+          {renderContent()}
+        </View>
+      </Animated.ScrollView>
+    );
+  }
+
   render() {
-    const { renderContent, headerMaxHeight, scrollEventThrottle } = this.props;
     return (
       <View style={styles.container}>
-        <Animated.ScrollView
-          style={styles.scrollView}
-          scrollEventThrottle={scrollEventThrottle}
-          onScroll={Animated.event(
-            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
-          )}
-        >
-          <View style={[styles.scrollViewContent, { marginTop: headerMaxHeight }]}>
-            {renderContent()}
-          </View>
-        </Animated.ScrollView>
+        {this.renderScrollView()}
+        {this.renderNavbarBackground()}
         {this.renderHeaderBackground()}
-        {this.renderHeaderTitle()}        
-        {this.renderHeaderForeground()}
+        {this.renderHeaderTitle()}
+        {this.renderHeaderForeground()}        
       </View>
     );
   }

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