Added contentStyle & contentContainerStyle

kyaroru · Dec 14, 2018 · e24c80d · e24c80d
1 parent 4de275b
commit e24c80d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -15,46 +15,87 @@
 $ npm i react-native-parallax-header --save
 ```
 ## Demo
-### iPhone X
-![iPhone X (Image)](http://g.recordit.co/o24X5s9rFv.gif)
-![iPhone X (Color)](http://g.recordit.co/Owbt2X4ZCo.gif)
+### iPhone X or XS
+![iPhone X (Image)](http://g.recordit.co/iWW0MOia6i.gif)
+![iPhone X (Color)](http://g.recordit.co/vDfanKwzy0.gif)
 
 ### iPhone 8
-![iPhone 8 (Image)](http://g.recordit.co/7dbGiEDx7H.gif)
-![iPhone 8 (Color)](http://g.recordit.co/YxXtQjTXMU.gif)
+![iPhone 8 (Image)](http://g.recordit.co/g7zcxrsKD6.gif)
+![iPhone 8 (Color)](http://g.recordit.co/3JYXSvjFAM.gif)
 
 ## Example
 ```jsx
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import ReactNativeParallaxHeader from 'react-native-parallax-header';
 
+const IS_IPHONE_X = SCREEN_HEIGHT === || SCREEN_HEIGHT === 896;
+const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
+const HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 45;
+const NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT;
+
 const viewImages = {
   background: require('../../../img/test.jpg'),
 };
 
-
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: Colors.white,
+  navContainer: {
+    height: HEADER_HEIGHT,
+    marginHorizontal: 10,
+  },
+  statusBar: {
+    height: STATUS_BAR_HEIGHT,
+    backgroundColor: Colors.transparent,
+  },
+  navBar: {
+    height: NAV_BAR_HEIGHT,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: Colors.transparent,
+  },
+  innerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10,
   },
   titleStyle: {
-    fontSize: 16,
+    color: Colors.white,
+    fontWeight: 'bold',
+    fontSize: 18,
   },
 });
 
+renderNavBar = () => (
+  <View style={styles.navContainer}>
+    <View style={styles.statusBar} />
+    <View style={styles.navBar}>
+      <TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
+        <Icon name="add" size={25} color="#fff" />
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.iconRight} onPress={() => {}}>
+        <Icon name="search" size={25} color="#fff" />
+      </TouchableOpacity>
+    </View>
+  </View>
+)
+
 render() {
   return (
-    <View style={styles.container}>
+    <View style={commonStyles.container}>
       <ReactNativeParallaxHeader
-        headerMinHeight={120}
-        headerMaxHeight={170}
+        headerMinHeight={HEADER_HEIGHT}
+        headerMaxHeight={250}
         extraScrollHeight={20}
         navbarColor={Colors.primary}
-        title={'Parallax Header :p'}
+        title="Parallax Header ~"
         titleStyle={styles.titleStyle}
         backgroundImage={viewImages.background}
         backgroundImageScale={1.2}
         renderNavBar={this.renderNavBar}
         renderContent={this.renderContent}
+        contentContainerStyle={{ flexGrow: 1 }}
+        containerStyle={{ flex: 1 }}
       />
     </View>
   );
@@ -73,7 +114,8 @@ render() {
 | `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` |
-| `title` | `string` | No | This is the title to be display in the header | Default is empty string `‘’` | 
+| `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` |
-
+| `contentContainerStyle` | `style` | No | This is the contentContainerStyle style to override default `<ScrollView>` contentContainerStyle style | Default to null |
+| `contentStyle` | `style` | No | This is the inner content style to override default `<View>` style inside `<ScrollView>` component | Default to null |
diff --git a/index.js b/index.js
@@ -13,7 +13,7 @@ const {
   height: SCREEN_HEIGHT,
 } = Dimensions.get('window');
 
-const IS_IPHONE_X = SCREEN_HEIGHT === 812;
+const IS_IPHONE_X = SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 896;
 const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
 const NAV_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 45;
 
@@ -281,15 +281,18 @@ class RNParallax extends Component {
   }
 
   renderScrollView() {
-    const { renderContent, scrollEventThrottle } = this.props;
+    const { renderContent, scrollEventThrottle, contentContainerStyle, containerStyle } = this.props;
 
     return (
       <Animated.ScrollView
         style={styles.scrollView}
         scrollEventThrottle={scrollEventThrottle}
-        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
+        )}
+        contentContainerStyle={contentContainerStyle}
       >
-        <View style={{ marginTop: this.getHeaderMaxHeight() }}>
+        <View style={[{ marginTop: this.getHeaderMaxHeight() }, containerStyle]}>
           {renderContent()}
         </View>
       </Animated.ScrollView>
@@ -316,12 +319,14 @@ RNParallax.propTypes = {
   backgroundImage: PropTypes.any,
   navbarColor: PropTypes.string,
   title: PropTypes.string,
-  titleStyle: PropTypes.number,
+  titleStyle: PropTypes.any,
   headerMaxHeight: PropTypes.number,
   headerMinHeight: PropTypes.number,
   scrollEventThrottle: PropTypes.number,
   extraScrollHeight: PropTypes.number,
   backgroundImageScale: PropTypes.number,
+  contentContainerStyle: PropTypes.any,
+  containerStyle: PropTypes.any,
 };
 
 RNParallax.defaultProps = {
@@ -336,6 +341,8 @@ RNParallax.defaultProps = {
   scrollEventThrottle: SCROLL_EVENT_THROTTLE,
   extraScrollHeight: DEFAULT_EXTRA_SCROLL_HEIGHT,
   backgroundImageScale: DEFAULT_BACKGROUND_IMAGE_SCALE,
+  contentContainerStyle: null,
+  containerStyle: null,
 };
 
 export default RNParallax;