Merge pull request #60875 from bernhardoj/fix/60741-skeleton-overlaps

Fix skeleton overlaps with next button

Author: roryabraham

src/components/OptionsListSkeletonView.tsx

@@ -32,6 +32,7 @@ function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = fal
             fixedNumItems={fixedNumItems}
             speed={speed}
             shouldAnimate={shouldAnimate}
+            style={[styles.overflowHidden]}
             itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb2, styles.ml5, styles.br2]}
             gradientOpacityEnabled={gradientOpacityEnabled}
             renderSkeletonItem={({itemIndex}) => {

src/components/Skeletons/ItemListSkeletonView.tsx

@@ -14,6 +14,7 @@ type ListItemSkeletonProps = {
     itemViewStyle?: StyleProp<ViewStyle>;
     itemViewHeight?: number;
     speed?: number;
+    style?: StyleProp<ViewStyle>;
 };
 
 const getVerticalMargin = (style: StyleProp<ViewStyle>): number => {
@@ -37,6 +38,7 @@ function ItemListSkeletonView({
     itemViewStyle = {},
     itemViewHeight = CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT,
     speed,
+    style,
 }: ListItemSkeletonProps) {
     const theme = useTheme();
     const themeStyles = useThemeStyles();
@@ -83,7 +85,7 @@ function ItemListSkeletonView({
 
     return (
         <View
-            style={[themeStyles.flex1]}
+            style={[themeStyles.flex1, style]}
             onLayout={handleLayout}
         >
             {skeletonViewItems}