Added containerStyle for outermost <View>

- Added `scrollViewProps`
- Added `scrollViewStyle`
- Renamed original `containerStyle` to `innerContainerStyle`

README.md

@@ -89,8 +89,13 @@ render() {
         backgroundImageScale={1.2}
         renderNavBar={this.renderNavBar}
         renderContent={this.renderContent}
-        contentContainerStyle={{ flexGrow: 1 }}
         containerStyle={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        innerContainerStyle={{ flex: 1 }}
+        scrollViewProps={{
+          onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
+          onScrollEndDrag: () => console.log('onScrollEndDrag'),
+        }}
       />
     </View>
   );
@@ -113,7 +118,10 @@ render() {
 | `title` | `any` | No | This is the title to be display in the header, can be string or component | Default to `null` |
 | `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` |
+| `contentContainerStyle` | `style` | No | This is the contentContainerStyle style to override default `<ScrollView>` contentContainerStyle style | Default to null |
+| `containerStyle` | `style` | No | This is the style to override default outermost `<View>` style | Default to null |
+| `scrollViewStyle` | `style` | No | This is the scrollview style to override default `<ScrollView>` style | Default to null |
+| `innerContainerStyle` | `style` | No | This is the inner content style to override default `<View>` style inside `<ScrollView>` component | Default to null |
 | `alwaysShowTitle` | `bool` | No | This is to determine whether show or hide the title after scroll | Default to `true` |
-| `alwaysShowNavBar` | `bool` | No | This is to determine whether show or hide the navBar before scroll | Default to `true` |
+| `alwaysShowNavBar` | `bool` | No | This is to determine whether show or hide the navBar before scroll | Default to `true` |
+| `scrollViewProps` | `object` | No | This is to override default scroll view properties | Default to `{}` |

index.js

@@ -318,29 +318,30 @@ class RNParallax extends Component {
 
   renderScrollView() {
     const {
-      renderContent, scrollEventThrottle, contentContainerStyle, containerStyle,
+      renderContent, scrollEventThrottle, scrollViewStyle, contentContainerStyle, innerContainerStyle, scrollViewProps,
     } = this.props;
     const { scrollY } = this.state;
     return (
       <Animated.ScrollView
-        style={styles.scrollView}
+        style={[styles.scrollView, scrollViewStyle]}
+        contentContainerStyle={contentContainerStyle}
         scrollEventThrottle={scrollEventThrottle}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
         )}
-        contentContainerStyle={contentContainerStyle}
+        {...scrollViewProps}
       >
-        <View style={[{ marginTop: this.getHeaderMaxHeight() }, containerStyle]}>
+        <View style={[{ marginTop: this.getHeaderMaxHeight() }, innerContainerStyle]}>
           {renderContent()}
         </View>
       </Animated.ScrollView>
     );
   }
 
   render() {
-    const { navbarColor, statusBarColor } = this.props;
+    const { navbarColor, statusBarColor, containerStyle } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, containerStyle]}>
         <StatusBar
           backgroundColor={statusBarColor || navbarColor}
         />
@@ -368,10 +369,13 @@ RNParallax.propTypes = {
   extraScrollHeight: PropTypes.number,
   backgroundImageScale: PropTypes.number,
   contentContainerStyle: PropTypes.any,
+  innerContainerStyle: PropTypes.any,
+  scrollViewStyle: PropTypes.any,
   containerStyle: PropTypes.any,
   alwaysShowTitle: PropTypes.bool,
   alwaysShowNavBar: PropTypes.bool,
   statusBarColor: PropTypes.string,
+  scrollViewProps: PropTypes.object,
 };
 
 RNParallax.defaultProps = {
@@ -387,10 +391,13 @@ RNParallax.defaultProps = {
   extraScrollHeight: DEFAULT_EXTRA_SCROLL_HEIGHT,
   backgroundImageScale: DEFAULT_BACKGROUND_IMAGE_SCALE,
   contentContainerStyle: null,
+  innerContainerStyle: null,
+  scrollViewStyle: null,
   containerStyle: null,
   alwaysShowTitle: true,
   alwaysShowNavBar: true,
   statusBarColor: null,
+  scrollViewProps: {},
 };
 
 export default RNParallax;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-parallax-header",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A react native scroll view component with Parallax header :p",
   "main": "index.js",
   "scripts": {