Layout styling fixes (#23)

* Layout styling fixes

* Added ListComponentStyleProp to provide header styles
* Moved style prop from scrollview to view that wraps items in list
* Added contentContainerStyle prop
* Renamed prop for ScrollView from style to containerStyle

* Fix tests, update pkg version and changelog

Co-authored-by: Vadko <vadkointel@icloud.com>

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.1.3
+
+Layout styling fixes [#23](https://github.com/hyochan/react-native-masonry-list/pull/23)
+
+- Added ListComponentStyleProp to provide header styles
+- Moved style prop from scrollview to view that wraps items in list
+- Added contentContainerStyle prop
+- Renamed prop for ScrollView from style to containerStyle
+
 ## 1.1.1
 
 Expose `innerRef` to use ref of `MasonryList` [#21](https://github.com/hyochan/react-native-masonry-list/pull/21)

RNMasonryExample/App.tsx

@@ -209,6 +209,7 @@ const App: FC = () => {
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <MasonryList
+        ListHeaderComponent={<View />}
         contentContainerStyle={{
           paddingHorizontal: 24,
           alignSelf: 'stretch',

RNMasonryExample/package.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@react-native-seoul/masonry-list": "^1.0.10",
+    "@react-native-seoul/masonry-list": "^1.1.2",
     "react": "17.0.2",
     "react-native": "0.64.0"
   },

RNMasonryExample/yarn.lock

@@ -1116,10 +1116,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
-"@react-native-seoul/masonry-list@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@react-native-seoul/masonry-list/-/masonry-list-1.0.10.tgz#1b210ddebc06898c44b96d9307467e01856eb380"
-  integrity sha512-7MxAVvXznRsg3ygLh7cjR0UHLRbimn0eA9Z4As8jWBFXd99EW8XLUsQqbAcaTSHkfipJ/OgnzQH7zL/mLUx4wQ==
+"@react-native-seoul/masonry-list@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@react-native-seoul/masonry-list/-/masonry-list-1.1.2.tgz#bbef807541fd560e4ddb34cdb97ef8bd986473b2"
+  integrity sha512-Rt5Cqa6huErRb9zVG7Ez5FmvXFZ5Fvf9LxnTtXDKZlJqzVlS/2vqRlSUCGMHv9Qo1kDIXrRBjhH5tXuW/Nt4EA==
   dependencies:
     dooboolab-welcome "^1.3.2"
 
@@ -2042,9 +2042,9 @@ camelcase@^6.0.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30001181:
-  version "1.0.30001205"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8"
-  integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==
+  version "1.0.30001283"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001283.tgz"
+  integrity sha512-9RoKo841j1GQFSJz/nCXOj0sD7tHBtlowjYlrqIUS812x9/emfBLBt6IyMz1zIaYc/eRL8Cs6HPUVi2Hzq4sIg==
 
 capture-exit@^2.0.0:
   version "2.0.0"

__tests__/__snapshots__/MasonryList.test.tsx.snap

@@ -38,12 +38,16 @@ exports[`Rendering should render without crashing 1`] = `
 >
   <RCTRefreshControl />
   <View>
+    <View />
     <View
       style={
-        Object {
-          "flex": 1,
-          "flexDirection": "row",
-        }
+        Array [
+          Object {
+            "flex": 1,
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
       }
     >
       <View

index.tsx

@@ -26,6 +26,9 @@ interface Props<T>
   ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
   ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;
   ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
+  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
   numColumns?: number;
 }
 
@@ -52,22 +55,27 @@ function MasonryList<T>(props: Props<T>): ReactElement {
     ListHeaderComponent,
     ListEmptyComponent,
     ListFooterComponent,
+    ListHeaderComponentStyle,
+    containerStyle,
+    contentContainerStyle,
     renderItem,
     onEndReachedThreshold,
     onEndReached,
     onRefresh,
     loading,
     LoadingView,
     numColumns = 2,
-    style,
     horizontal,
   } = props;
 
+  const {style, ...propsWithoutStyle} = props;
+
   return (
     <ScrollView
-      {...props}
+      {...propsWithoutStyle}
       ref={innerRef}
-      style={[{flex: 1, alignSelf: 'stretch'}, style]}
+      style={[{flex: 1, alignSelf: 'stretch'}, containerStyle]}
+      contentContainerStyle={contentContainerStyle}
       removeClippedSubviews={true}
       refreshControl={
         <RefreshControl
@@ -84,15 +92,22 @@ function MasonryList<T>(props: Props<T>): ReactElement {
         if (isCloseToBottom(nativeEvent, onEndReachedThreshold || 0.1))
           onEndReached?.();
       }}>
-      {ListHeaderComponent}
+      <View style={ListHeaderComponentStyle}>{ListHeaderComponent}</View>
       {data.length === 0 && ListEmptyComponent ? (
         React.isValidElement(ListEmptyComponent) ? (
           ListEmptyComponent
         ) : (
           <ListEmptyComponent />
         )
       ) : (
-        <View style={{flex: 1, flexDirection: horizontal ? 'column' : 'row'}}>
+        <View
+          style={[
+            {
+              flex: 1,
+              flexDirection: horizontal ? 'column' : 'row',
+            },
+            style,
+          ]}>
           {Array.from(Array(numColumns), (_, num) => {
             return (
               <View

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-seoul/masonry-list",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "React Native Masonry List for Pinterest like UI implemented just like the [FlatList].",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",