Add headerImage props

bamlab · Feb 4, 2018 · 53135e9 · 53135e9
1 parent c9b5e6d
commit 53135e9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -28,9 +28,7 @@ render() {
     <HeaderImageScrollView
       maxHeight={200}
       minHeight={MIN_HEIGHT}
-      renderHeader={() => (
-        <Image source={require('../assets/NZ.jpg')} style={styles.image} />
-      )}
+      headerImage={require('../../assets/NZ.jpg')}
     >
       <View style={{ height: 1000 }}>
         <TriggeringView onHide={() => console.log('text hidden')} >
@@ -54,6 +52,7 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | Property | Type | Default | Description |
 | -------- | ---- | ------- | ----------- |
 | `renderHeader` | `function` | Empty view | Function which return the component to use as header. It can return background image for example. |
+| `headerImage` | Image source Props (object or number) | `undefined` | Shortcut for `renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }} />}` |
 | `maxHeight` | `number` | `80` | Max height for the header |
 | `minHeight` | `number` | `125` | Min height for the header (in navbar mode) |
 | `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll |

diff --git a/src/ImageHeaderScrollView.js b/src/ImageHeaderScrollView.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, ScrollView, StyleSheet, View, Platform } from 'react-native';
+import { Animated, ScrollView, StyleSheet, View, Image, Dimensions } from 'react-native';
 import type { ViewProps } from 'ViewPropTypes';
 import type { FlatList, SectionList, ListView } from 'react-native';
 
@@ -12,6 +12,19 @@ type ScrollViewProps = {
   scrollEventThrottle: number,
 };
 
+type SourceObjectProps = {
+  uri?: ?string,
+  bundle?: ?string,
+  method?: ?string,
+  headers?: ?{ [string]: string },
+  body?: ?string,
+  cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  width?: ?number,
+  height?: ?number,
+  scale?: ?number,
+};
+type SourceProps = number | SourceObjectProps | SourceObjectProps[];
+
 export type Props = ScrollViewProps & {
   children?: ?React$Element<any>,
   childrenStyle?: ?any,
@@ -28,6 +41,7 @@ export type Props = ScrollViewProps & {
   renderTouchableFixedForeground?: ?() => React$Element<any>,
   ScrollViewComponent: React$ComponentType<ScrollViewProps>,
   scrollViewBackgroundColor: string,
+  headerImage?: ?SourceProps,
 };
 
 export type DefaultProps = {
@@ -94,6 +108,21 @@ class ImageHeaderScrollView extends Component<Props, State> {
     });
   }
 
+  renderHeaderProps() {
+    if (this.props.headerImage) {
+      return (
+        <Image
+          source={this.props.headerImage}
+          style={{
+            height: this.props.maxHeight,
+            width: Dimensions.get('window').width,
+          }}
+        />
+      );
+    }
+    return this.props.renderHeader();
+  }
+
   renderHeader() {
     const overlayOpacity = this.interpolateOnImageHeight([
       this.props.minOverlayOpacity,
@@ -118,7 +147,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
 
     return (
       <Animated.View style={[styles.header, headerTransformStyle]}>
-        {this.props.renderHeader()}
+        {this.renderHeaderProps()}
         <Animated.View style={overlayStyle} />
         <View style={styles.fixedForeground}>{this.props.renderFixedForeground()}</View>
       </Animated.View>