diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.android.js b/src/components/InvertedFlatList/CellRendererComponent/index.android.js index 91a4328d8c73..f040894a6dc1 100644 --- a/src/components/InvertedFlatList/CellRendererComponent/index.android.js +++ b/src/components/InvertedFlatList/CellRendererComponent/index.android.js @@ -15,11 +15,14 @@ function CellRendererComponent(props) { {...props} style={[ styles.invert, - // To achieve absolute positioning and handle overflows for list items, - // it is necessary to assign zIndex values. In the case of inverted lists, - // the lower list items will have higher zIndex values compared to the upper - // list items. Consequently, lower list items can overflow the upper list items. - // See: https://github.com/Expensify/App/issues/20451 + + /** + * To achieve absolute positioning and handle overflows for list items, + * it is necessary to assign zIndex values. In the case of inverted lists, + * the lower list items will have higher zIndex values compared to the upper + * list items. Consequently, lower list items can overflow the upper list items. + * See: https://github.com/Expensify/App/issues/20451 + */ { zIndex: -props.index } ]} /> diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js b/src/components/InvertedFlatList/CellRendererComponent/index.ios.js index 301b95e9d23a..8cdd33c37e87 100644 --- a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js +++ b/src/components/InvertedFlatList/CellRendererComponent/index.ios.js @@ -21,11 +21,14 @@ function CellRendererComponent(props) { {...props} style={[ props.style, - // To achieve absolute positioning and handle overflows for list items, - // it is necessary to assign zIndex values. In the case of inverted lists, - // the lower list items will have higher zIndex values compared to the upper - // list items. Consequently, lower list items can overflow the upper list items. - // See: https://github.com/Expensify/App/issues/20451 + + /** + * To achieve absolute positioning and handle overflows for list items, + * it is necessary to assign zIndex values. In the case of inverted lists, + * the lower list items will have higher zIndex values compared to the upper + * list items. Consequently, lower list items can overflow the upper list items. + * See: https://github.com/Expensify/App/issues/20451 + */ { zIndex: -props.index } ]} /> diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 38d5e985e9e3..0622883aacba 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -48,7 +48,12 @@ class InvertedFlatList extends React.Component { ListFooterComponentStyle={[styles.invert, this.props.ListFooterComponentStyle]} verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position CellRendererComponent={CellRendererComponent} - // Enables absolute positioning with zIndex in the list. Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews + + /** + * To achieve absolute positioning and handle overflows for list items, the property must be disabled + * for Android native builds. + * Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews + */ removeClippedSubviews={false} /> );