@shopify/flash-list 1.3.1 → 1.4.0

package/dist/utils/ContentContainerUtils.d.ts

@@ -0,0 +1,27 @@
+import { ViewStyle } from "react-native";
+import { Dimension } from "recyclerlistview";
+import { ContentStyle } from "../FlashListProps";
+export interface ContentStyleExplicit {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    backgroundColor?: string;
+}
+export declare const updateContentStyle: (contentStyle: ContentStyle, contentContainerStyleSource: ContentStyle | undefined) => ContentStyleExplicit;
+export declare const hasUnsupportedKeysInContentContainerStyle: (contentContainerStyleSource: ViewStyle | undefined) => boolean;
+/** Applies padding corrections to given dimension. Mutates the dim object that was passed and returns it. */
+export declare const applyContentContainerInsetForLayoutManager: (dim: Dimension, contentContainerStyle: ViewStyle | undefined, horizontal: boolean | undefined | null) => Dimension;
+/** Returns padding to be applied on content container and will ignore paddings that have already been handled. */
+export declare const getContentContainerPadding: (contentStyle: ContentStyleExplicit, horizontal: boolean | undefined | null) => {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+} | {
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+};
+//# sourceMappingURL=ContentContainerUtils.d.ts.map

package/dist/utils/ContentContainerUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainerUtils.d.ts","sourceRoot":"","sources":["../../src/utils/ContentContainerUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,iBACf,YAAY,+BACG,YAAY,GAAG,SAAS,KACpD,oBAyBF,CAAC;AAEF,eAAO,MAAM,yCAAyC,gCACvB,SAAS,GAAG,SAAS,YAcnD,CAAC;AAEF,6GAA6G;AAC7G,eAAO,MAAM,0CAA0C,QAChD,SAAS,yBACS,SAAS,GAAG,SAAS,cAChC,OAAO,GAAG,SAAS,GAAG,IAAI,cASvC,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,0BAA0B,iBACvB,oBAAoB,cACtB,OAAO,GAAG,SAAS,GAAG,IAAI;;;;;;;;;;CAavC,CAAC"}

package/dist/utils/ContentContainerUtils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContentContainerPadding = exports.applyContentContainerInsetForLayoutManager = exports.hasUnsupportedKeysInContentContainerStyle = exports.updateContentStyle = void 0;
+var tslib_1 = require("tslib");
+var updateContentStyle = function (contentStyle, contentContainerStyleSource) {
+    var _a = (contentContainerStyleSource !== null && contentContainerStyleSource !== void 0 ? contentContainerStyleSource : {}), paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, paddingBottom = _a.paddingBottom, paddingLeft = _a.paddingLeft, padding = _a.padding, paddingVertical = _a.paddingVertical, paddingHorizontal = _a.paddingHorizontal, backgroundColor = _a.backgroundColor;
+    contentStyle.paddingLeft = Number(paddingLeft || paddingHorizontal || padding || 0);
+    contentStyle.paddingRight = Number(paddingRight || paddingHorizontal || padding || 0);
+    contentStyle.paddingTop = Number(paddingTop || paddingVertical || padding || 0);
+    contentStyle.paddingBottom = Number(paddingBottom || paddingVertical || padding || 0);
+    contentStyle.backgroundColor = backgroundColor;
+    return contentStyle;
+};
+exports.updateContentStyle = updateContentStyle;
+var hasUnsupportedKeysInContentContainerStyle = function (contentContainerStyleSource) {
+    var _a = (contentContainerStyleSource !== null && contentContainerStyleSource !== void 0 ? contentContainerStyleSource : {}), paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, paddingBottom = _a.paddingBottom, paddingLeft = _a.paddingLeft, padding = _a.padding, paddingVertical = _a.paddingVertical, paddingHorizontal = _a.paddingHorizontal, backgroundColor = _a.backgroundColor, rest = tslib_1.__rest(_a, ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "padding", "paddingVertical", "paddingHorizontal", "backgroundColor"]);
+    return Object.keys(rest).length > 0;
+};
+exports.hasUnsupportedKeysInContentContainerStyle = hasUnsupportedKeysInContentContainerStyle;
+/** Applies padding corrections to given dimension. Mutates the dim object that was passed and returns it. */
+var applyContentContainerInsetForLayoutManager = function (dim, contentContainerStyle, horizontal) {
+    var contentStyle = (0, exports.updateContentStyle)({}, contentContainerStyle);
+    if (horizontal) {
+        dim.height -= contentStyle.paddingTop + contentStyle.paddingBottom;
+    }
+    else {
+        dim.width -= contentStyle.paddingLeft + contentStyle.paddingRight;
+    }
+    return dim;
+};
+exports.applyContentContainerInsetForLayoutManager = applyContentContainerInsetForLayoutManager;
+/** Returns padding to be applied on content container and will ignore paddings that have already been handled. */
+var getContentContainerPadding = function (contentStyle, horizontal) {
+    if (horizontal) {
+        return {
+            paddingTop: contentStyle.paddingTop,
+            paddingBottom: contentStyle.paddingBottom,
+        };
+    }
+    else {
+        return {
+            paddingLeft: contentStyle.paddingLeft,
+            paddingRight: contentStyle.paddingRight,
+        };
+    }
+};
+exports.getContentContainerPadding = getContentContainerPadding;
+//# sourceMappingURL=ContentContainerUtils.js.map

package/dist/utils/ContentContainerUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainerUtils.js","sourceRoot":"","sources":["../../src/utils/ContentContainerUtils.ts"],"names":[],"mappings":";;;;AAaO,IAAM,kBAAkB,GAAG,UAChC,YAA0B,EAC1B,2BAAqD;IAE/C,IAAA,KASF,CAAC,2BAA2B,aAA3B,2BAA2B,cAA3B,2BAA2B,GAAI,EAAE,CAAc,EARlD,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,eAAe,qBACmC,CAAC;IACrD,YAAY,CAAC,WAAW,GAAG,MAAM,CAC/B,WAAW,IAAI,iBAAiB,IAAI,OAAO,IAAI,CAAC,CACjD,CAAC;IACF,YAAY,CAAC,YAAY,GAAG,MAAM,CAChC,YAAY,IAAI,iBAAiB,IAAI,OAAO,IAAI,CAAC,CAClD,CAAC;IACF,YAAY,CAAC,UAAU,GAAG,MAAM,CAC9B,UAAU,IAAI,eAAe,IAAI,OAAO,IAAI,CAAC,CAC9C,CAAC;IACF,YAAY,CAAC,aAAa,GAAG,MAAM,CACjC,aAAa,IAAI,eAAe,IAAI,OAAO,IAAI,CAAC,CACjD,CAAC;IACF,YAAY,CAAC,eAAe,GAAG,eAAe,CAAC;IAC/C,OAAO,YAAoC,CAAC;AAC9C,CAAC,CAAC;AA5BW,QAAA,kBAAkB,sBA4B7B;AAEK,IAAM,yCAAyC,GAAG,UACvD,2BAAkD;IAElD,IAAM,KAUF,CAAC,2BAA2B,aAA3B,2BAA2B,cAA3B,2BAA2B,GAAI,EAAE,CAAc,EATlD,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,eAAe,qBAAA,EACf,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACZ,IAAI,sBATH,oIAUL,CAAmD,CAAC;IACrD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;AACtC,CAAC,CAAC;AAfW,QAAA,yCAAyC,6CAepD;AAEF,6GAA6G;AACtG,IAAM,0CAA0C,GAAG,UACxD,GAAc,EACd,qBAA4C,EAC5C,UAAsC;IAEtC,IAAM,YAAY,GAAG,IAAA,0BAAkB,EAAC,EAAE,EAAE,qBAAqB,CAAC,CAAC;IACnE,IAAI,UAAU,EAAE;QACd,GAAG,CAAC,MAAM,IAAI,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,aAAa,CAAC;KACpE;SAAM;QACL,GAAG,CAAC,KAAK,IAAI,YAAY,CAAC,WAAW,GAAG,YAAY,CAAC,YAAY,CAAC;KACnE;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAZW,QAAA,0CAA0C,8CAYrD;AAEF,kHAAkH;AAC3G,IAAM,0BAA0B,GAAG,UACxC,YAAkC,EAClC,UAAsC;IAEtC,IAAI,UAAU,EAAE;QACd,OAAO;YACL,UAAU,EAAE,YAAY,CAAC,UAAU;YACnC,aAAa,EAAE,YAAY,CAAC,aAAa;SAC1C,CAAC;KACH;SAAM;QACL,OAAO;YACL,WAAW,EAAE,YAAY,CAAC,WAAW;YACrC,YAAY,EAAE,YAAY,CAAC,YAAY;SACxC,CAAC;KACH;AACH,CAAC,CAAC;AAfW,QAAA,0BAA0B,8BAerC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/flash-list",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "keywords": [
     "react-native",
     "recyclerview",
@@ -72,7 +72,7 @@
     "metro-react-native-babel-preset": "^0.71.1",
     "prettier": "^2.7.1",
     "react": "17.0.2",
-    "react-native": "0.68.1",
+    "react-native": "0.68.5",
     "typescript": "^4.7.4"
   },
   "files": [
@@ -84,7 +84,7 @@
     "jestSetup.js"
   ],
   "dependencies": {
-    "recyclerlistview": "4.1.2",
+    "recyclerlistview": "4.2.0",
     "tslib": "2.4.0"
   }
 }

package/src/FlashList.tsx

@@ -3,7 +3,6 @@ import {
   View,
   RefreshControl,
   LayoutChangeEvent,
-  ViewStyle,
   NativeSyntheticEvent,
   NativeScrollEvent,
 } from "react-native";
@@ -27,7 +26,6 @@ import WarningList from "./errors/Warnings";
 import ViewabilityManager from "./viewability/ViewabilityManager";
 import {
   FlashListProps,
-  ContentStyle,
   RenderTarget,
   RenderTargetOptions,
 } from "./FlashListProps";
@@ -37,6 +35,12 @@ import {
   getItemAnimator,
   PlatformConfig,
 } from "./native/config/PlatformHelper";
+import {
+  ContentStyleExplicit,
+  getContentContainerPadding,
+  hasUnsupportedKeysInContentContainerStyle,
+  updateContentStyle,
+} from "./utils/ContentContainerUtils";
 
 interface StickyProps extends StickyContainerProps {
   children: any;
@@ -67,7 +71,13 @@ class FlashList<T> extends React.PureComponent<
   private transformStyle = { transform: [{ scaleY: -1 }] };
   private transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
   private distanceFromWindow = 0;
-  private contentStyle: ContentStyle = {};
+  private contentStyle: ContentStyleExplicit = {
+    paddingBottom: 0,
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+  };
+
   private loadStartTime = 0;
   private isListLoaded = false;
   private windowCorrectionConfig: WindowCorrectionConfig = {
@@ -130,13 +140,13 @@ class FlashList<T> extends React.PureComponent<
     if (Object.keys(this.props.style || {}).length > 0) {
       console.warn(WarningList.styleUnsupported);
     }
-    const contentStyleInfo = this.getContentContainerInfo();
-    if (contentStyleInfo.unsupportedKeys) {
+    if (
+      hasUnsupportedKeysInContentContainerStyle(
+        this.props.contentContainerStyle
+      )
+    ) {
       console.warn(WarningList.styleContentContainerUnsupported);
     }
-    if (contentStyleInfo.paddingIgnored) {
-      console.warn(WarningList.styleUnsupportedPaddingType);
-    }
   }
 
   // Some of the state variables need to update when props change
@@ -151,6 +161,14 @@ class FlashList<T> extends React.PureComponent<
         newState.numColumns,
         nextProps
       );
+    } else if (prevState.layoutProvider.updateProps(nextProps).hasExpired) {
+      newState.layoutProvider = FlashList.getLayoutProvider<T>(
+        newState.numColumns,
+        nextProps
+      );
+      // RLV retries to reposition the first visible item on layout provider change.
+      // It's not required in our case so we're disabling it
+      newState.layoutProvider.shouldRefreshWithAnchoring = false;
     }
     if (nextProps.data !== prevState.data) {
       newState.data = nextProps.data;
@@ -165,7 +183,6 @@ class FlashList<T> extends React.PureComponent<
       newState.extraData = { value: nextProps.extraData };
     }
     newState.renderItem = nextProps.renderItem;
-    newState.layoutProvider.updateProps(nextProps);
     return newState;
   }
 
@@ -270,7 +287,7 @@ class FlashList<T> extends React.PureComponent<
 
   render() {
     this.isEmptyList = this.state.dataProvider.getSize() === 0;
-    this.contentStyle = this.getContentContainerInfo().style;
+    updateContentStyle(this.contentStyle, this.props.contentContainerStyle);
 
     const {
       drawDistance,
@@ -329,6 +346,8 @@ class FlashList<T> extends React.PureComponent<
               // Required to handle a scrollview bug. Check: https://github.com/Shopify/flash-list/pull/187
               minHeight: 1,
               minWidth: 1,
+
+              ...getContentContainerPadding(this.contentStyle, horizontal),
             },
             ...this.props.overrideProps,
           }}
@@ -507,46 +526,6 @@ class FlashList<T> extends React.PureComponent<
     return (this.props.inverted && transformStyle) || undefined;
   }
 
-  private getContentContainerInfo() {
-    const {
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      padding,
-      paddingVertical,
-      paddingHorizontal,
-      backgroundColor,
-      ...rest
-    } = (this.props.contentContainerStyle || {}) as ViewStyle;
-    const unsupportedKeys = Object.keys(rest).length > 0;
-    if (this.props.horizontal) {
-      const paddingIgnored =
-        padding || paddingVertical || paddingTop || paddingBottom;
-      return {
-        style: {
-          paddingLeft: paddingLeft || paddingHorizontal || padding || 0,
-          paddingRight: paddingRight || paddingHorizontal || padding || 0,
-          backgroundColor,
-        },
-        unsupportedKeys,
-        paddingIgnored,
-      };
-    } else {
-      const paddingIgnored =
-        padding || paddingHorizontal || paddingLeft || paddingRight;
-      return {
-        style: {
-          paddingTop: paddingTop || paddingVertical || padding || 0,
-          paddingBottom: paddingBottom || paddingVertical || padding || 0,
-          backgroundColor,
-        },
-        unsupportedKeys,
-        paddingIgnored,
-      };
-    }
-  }
-
   private separator = (index: number) => {
     // Make sure we have data and don't read out of bounds
     if (

package/src/FlashListProps.ts

@@ -148,7 +148,6 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
   /**
    * You can use `contentContainerStyle` to apply padding that will be applied to the whole content itself.
    * For example, you can apply this padding, so that all of your items have leading and trailing space.
-   * Note: horizontal padding is ignored on vertical lists and vertical padding on horizontal ones.
    */
   contentContainerStyle?: ContentStyle;
 

package/src/GridLayoutProviderWithProps.ts

@@ -7,12 +7,14 @@ import {
 
 import { FlashListProps } from "./FlashListProps";
 import { AverageWindow } from "./utils/AverageWindow";
+import { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
 
 export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
   private props: FlashListProps<T>;
   private layoutObject = { span: undefined, size: undefined };
-
   private averageWindow: AverageWindow;
+  private renderWindowInsets: Dimension = { width: 0, height: 0 };
+  private _hasExpired = false;
   public defaultEstimatedItemSize = 100;
 
   constructor(
@@ -57,10 +59,36 @@ export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
       1,
       props.estimatedItemSize ?? this.defaultEstimatedItemSize
     );
+    this.renderWindowInsets = this.getAdjustedRenderWindowSize(
+      this.renderWindowInsets
+    );
   }
 
-  public updateProps(props: FlashListProps<T>) {
+  public updateProps(props: FlashListProps<T>): GridLayoutProviderWithProps<T> {
+    this._hasExpired = this.props.numColumns !== props.numColumns;
+    const newInsetValues = applyContentContainerInsetForLayoutManager(
+      {
+        height: 0,
+        width: 0,
+      },
+      props.contentContainerStyle,
+      Boolean(props.horizontal)
+    );
+    this._hasExpired =
+      this._hasExpired ||
+      newInsetValues.height !== this.renderWindowInsets.height ||
+      newInsetValues.width !== this.renderWindowInsets.width;
+    this.renderWindowInsets = newInsetValues;
     this.props = props;
+    return this;
+  }
+
+  /**
+   * This methods returns true if the layout provider has expired and needs to be recreated.
+   * This can happen if the number of columns has changed or the render window size has changed in a way that cannot be handled by the layout provider internally.
+   */
+  public get hasExpired() {
+    return this._hasExpired;
   }
 
   /**
@@ -104,7 +132,7 @@ export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
       this.averageWindow.currentValue
     );
     const newLayoutManager = super.newLayoutManager(
-      renderWindowSize,
+      this.getAdjustedRenderWindowSize(renderWindowSize),
       isHorizontal,
       cachedLayouts
     );
@@ -134,4 +162,12 @@ export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
     this.layoutObject.span = undefined;
     return this.layoutObject;
   }
+
+  private getAdjustedRenderWindowSize(renderWindowSize: Dimension) {
+    return applyContentContainerInsetForLayoutManager(
+      { ...renderWindowSize },
+      this.props.contentContainerStyle,
+      Boolean(this.props.horizontal)
+    );
+  }
 }

package/src/MasonryFlashList.tsx

@@ -12,6 +12,7 @@ import CustomError from "./errors/CustomError";
 import ExceptionList from "./errors/ExceptionList";
 import FlashList from "./FlashList";
 import { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
+import { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
 import ViewToken from "./viewability/ViewToken";
 
 export interface MasonryListRenderItemInfo<TItem>
@@ -31,6 +32,7 @@ export interface MasonryFlashListProps<T>
     | "initialScrollIndex"
     | "inverted"
     | "onBlankArea"
+    | "renderItem"
     | "viewabilityConfigCallbackPairs"
   > {
   /**
@@ -175,6 +177,12 @@ const MasonryFlashListComponent = React.forwardRef(
       (dataSet[0]?.length ?? 0) *
       (props.estimatedItemSize ?? defaultEstimatedItemSize);
 
+    const insetForLayoutManager = applyContentContainerInsetForLayoutManager(
+      { height: 0, width: 0 },
+      props.contentContainerStyle,
+      false
+    );
+
     return (
       <FlashList
         ref={getFlashList}
@@ -227,8 +235,9 @@ const MasonryFlashListComponent = React.forwardRef(
               estimatedListSize={{
                 height: estimatedListSize.height,
                 width:
-                  ((getListRenderedSize(parentFlashList)?.width ||
-                    estimatedListSize.width) /
+                  (((getListRenderedSize(parentFlashList)?.width ||
+                    estimatedListSize.width) +
+                    insetForLayoutManager.width) /
                     totalColumnFlex) *
                   (getColumnFlex?.(
                     args.item,
@@ -430,8 +439,13 @@ const updateViewTokens = (tokens: ViewToken[]) => {
   for (let i = 0; i < length; i++) {
     const token = tokens[i];
     if (token.index !== null && token.index !== undefined) {
-      token.index = token.item.originalIndex;
-      token.item = token.item.originalItem;
+      if (token.item) {
+        token.index = token.item.originalIndex;
+        token.item = token.item.originalItem;
+      } else {
+        token.index = null;
+        token.item = undefined;
+      }
     }
   }
 };

package/src/__tests__/ContentContainerUtils.test.ts

@@ -0,0 +1,130 @@
+import {
+  applyContentContainerInsetForLayoutManager,
+  getContentContainerPadding,
+  hasUnsupportedKeysInContentContainerStyle,
+  updateContentStyle,
+} from "../utils/ContentContainerUtils";
+
+describe("ContentContainerUtils", () => {
+  it("detects unsupported keys in style", () => {
+    expect(hasUnsupportedKeysInContentContainerStyle({ flex: 1 })).toBe(true);
+    expect(hasUnsupportedKeysInContentContainerStyle({ paddingTop: 0 })).toBe(
+      false
+    );
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({
+        paddingTop: 1,
+        paddingVertical: 1,
+      })
+    ).toBe(false);
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({
+        paddingTop: 1,
+        paddingVertical: 1,
+        padding: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingBottom: 1,
+        backgroundColor: "red",
+        paddingHorizontal: 1,
+      })
+    ).toBe(false);
+    expect(hasUnsupportedKeysInContentContainerStyle({ margin: 1 })).toBe(true);
+    expect(hasUnsupportedKeysInContentContainerStyle({ padding: 1 })).toBe(
+      false
+    );
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({ backgroundColor: "red" })
+    ).toBe(false);
+  });
+  it("updated content style to have all supported styles defined", () => {
+    expect(
+      updateContentStyle({}, { padding: 1, backgroundColor: "red" })
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      backgroundColor: "red",
+    });
+    expect(updateContentStyle({}, { paddingHorizontal: 1 })).toEqual({
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+    expect(updateContentStyle({}, { paddingVertical: 1 })).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 0,
+      paddingRight: 0,
+    });
+    expect(
+      updateContentStyle({}, { paddingLeft: "1", paddingVertical: "1" })
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 1,
+      paddingRight: 0,
+    });
+  });
+  it("computes correct layout manager insets", () => {
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { padding: 1 },
+        false
+      )
+    ).toEqual({ height: 0, width: -2 });
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { padding: 1 },
+        true
+      )
+    ).toEqual({ height: -2, width: 0 });
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { paddingVertical: 1 },
+        true
+      )
+    ).toEqual({ height: -2, width: 0 });
+  });
+  it("calculated correct padding for scrollview content", () => {
+    expect(
+      getContentContainerPadding(
+        {
+          paddingLeft: 1,
+          paddingTop: 1,
+          paddingBottom: 1,
+          paddingRight: 1,
+          backgroundColor: "red",
+        },
+        true
+      )
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: undefined,
+      paddingRight: undefined,
+    });
+    expect(
+      getContentContainerPadding(
+        {
+          paddingLeft: 1,
+          paddingTop: 1,
+          paddingBottom: 1,
+          paddingRight: 1,
+          backgroundColor: "red",
+        },
+        false
+      )
+    ).toEqual({
+      paddingTop: undefined,
+      paddingBottom: undefined,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+  });
+});

package/src/__tests__/FlashList.test.tsx

@@ -824,4 +824,36 @@ describe("FlashList", () => {
     expect(scrollToOffset).toBeCalledWith(1800, 1800, false, true);
     flashList.unmount();
   });
+  it("applies horizontal content container padding for vertical list", () => {
+    const flashList = mountFlashList({
+      numColumns: 4,
+      contentContainerStyle: { paddingHorizontal: 10 },
+    });
+    let hasLayoutItems = false;
+    flashList.instance.state.layoutProvider
+      .getLayoutManager()!
+      .getLayouts()
+      .forEach((layout) => {
+        hasLayoutItems = true;
+        expect(layout.width).toBe(95);
+      });
+    expect(hasLayoutItems).toBe(true);
+    flashList.unmount();
+  });
+  it("applies vertical content container padding for horizontal list", () => {
+    const flashList = mountFlashList({
+      horizontal: true,
+      contentContainerStyle: { paddingVertical: 10 },
+    });
+    let hasLayoutItems = false;
+    flashList.instance.state.layoutProvider
+      .getLayoutManager()!
+      .getLayouts()
+      .forEach((layout) => {
+        hasLayoutItems = true;
+        expect(layout.height).toBe(880);
+      });
+    expect(hasLayoutItems).toBe(true);
+    flashList.unmount();
+  });
 });

package/src/__tests__/GridLayoutProviderWithProps.test.ts

@@ -147,4 +147,33 @@ describe("GridLayoutProviderWithProps", () => {
     // horizontal list
     runCacheUpdateTest(true);
   });
+  it("expires if column count or padding changes", () => {
+    const flashList = mountFlashList();
+    const baseProps = flashList.instance.props;
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingTop: 10 },
+      }).hasExpired
+    ).toBe(false);
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingBottom: 10 },
+      }).hasExpired
+    ).toBe(false);
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingLeft: 10 },
+      }).hasExpired
+    ).toBe(true);
+    flashList.instance.state.layoutProvider["_hasExpired"] = false;
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        numColumns: 2,
+      }).hasExpired
+    ).toBe(true);
+  });
 });

package/src/__tests__/MasonryFlashList.test.ts

@@ -261,4 +261,32 @@ describe("MasonryFlashList", () => {
       )
     ).toBe(35339);
   });
+  it("applies horizontal content container padding to the list", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      numColumns: 4,
+      contentContainerStyle: { paddingHorizontal: 10 },
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(5);
+    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
+      if (index === 0) {
+        expect(list.instance.getRenderedSize().width).toBe(400);
+        expect(list.instance.getRenderedSize().height).toBe(900);
+      } else {
+        expect(list.instance.getRenderedSize().width).toBe(95);
+        expect(list.instance.getRenderedSize().height).toBe(900);
+      }
+    });
+    masonryFlashList.unmount();
+  });
+  it("divides columns equally if no getColumnFlex is passed", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      numColumns: 4,
+    });
+    const progressiveListView =
+      masonryFlashList.find(ProgressiveListView)!.instance;
+    expect(progressiveListView.getLayout(0).width).toBe(100);
+    expect(progressiveListView.getLayout(1).width).toBe(100);
+    expect(progressiveListView.getLayout(2).width).toBe(100);
+    expect(progressiveListView.getLayout(3).width).toBe(100);
+  });
 });

package/src/__tests__/helpers/mountMasonryFlashList.tsx

@@ -16,7 +16,12 @@ jest.mock("../../FlashList", () => {
     componentDidMount() {
       super.componentDidMount();
       this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
-        nativeEvent: { layout: { height: 900, width: 400 } },
+        nativeEvent: {
+          layout: {
+            height: this.props.estimatedListSize?.height ?? 900,
+            width: this.props.estimatedListSize?.width ?? 400,
+          },
+        },
       });
     }
   }

package/src/errors/Warnings.ts

@@ -2,10 +2,7 @@ const WarningList = {
   styleUnsupported:
     "You have passed a style to FlashList. This list doesn't support styling, use contentContainerStyle or wrap the list in a parent and apply style to it instead.",
   styleContentContainerUnsupported:
-    "FlashList only supports padding related props and backgroundColor in contentContainerStyle." +
-    " Please remove other values as they're not used. In case of vertical lists horizontal padding is ignored and vice versa, if you need it apply padding to your items instead.",
-  styleUnsupportedPaddingType:
-    "FlashList will ignore horizontal padding in case of vertical lists and vertical padding if the list is horizontal. If you need to have it apply relevant padding to your items instead.",
+    "FlashList only supports padding related props and backgroundColor in contentContainerStyle. Please remove other values as they're not used.",
   unusableRenderedSize:
     "FlashList's rendered size is not usable. Either the height or width is too small (<2px). " +
     "Please make sure that the parent view of the list has a valid size. FlashList will match the size of the parent.",