Merge pull request #52481 from software-mansion-labs/@szymczak/fix-disappearing-bg

Author: blimpich

ios/Podfile.lock

@@ -2661,7 +2661,7 @@ PODS:
     - RNSound/Core (= 0.11.2)
   - RNSound/Core (0.11.2):
     - React-Core
-  - RNSVG (15.6.0):
+  - RNSVG (15.9.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2681,9 +2681,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.6.0)
+    - RNSVG/common (= 15.9.0)
     - Yoga
-  - RNSVG/common (15.6.0):
+  - RNSVG/common (15.9.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3295,7 +3295,7 @@ SPEC CHECKSUMS:
   RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
   RNShare: bd4fe9b95d1ee89a200778cc0753ebe650154bb0
   RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852
-  RNSVG: 1079f96b39a35753d481a20e30603fd6fc4f6fa9
+  RNSVG: b2fbe96b2bb3887752f8abc1f495953847e90384
   SDWebImage: 066c47b573f408f18caa467d71deace7c0f8280d
   SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c

package-lock.json

@@ -168,7 +168,7 @@
     "react-native-screens": "3.34.0",
     "react-native-share": "11.0.2",
     "react-native-sound": "^0.11.2",
-    "react-native-svg": "15.6.0",
+    "react-native-svg": "15.9.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-view-shot": "3.8.0",

package.json

@@ -28,7 +28,7 @@ function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = fal
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}
-            itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb2, styles.mh5, styles.br2]}
+            itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb2, styles.ml5, styles.br2]}
             gradientOpacityEnabled={gradientOpacityEnabled}
             renderSkeletonItem={({itemIndex}) => {
                 const lineWidth = getLinedWidth(itemIndex);

src/components/OptionsListSkeletonView.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import SkeletonViewContentLoader from 'react-content-loader/native';
+import {StyleSheet} from 'react-native';
 import type SkeletonViewContentLoaderProps from './types';
 
-function ContentLoader(props: SkeletonViewContentLoaderProps) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <SkeletonViewContentLoader {...props} />;
+function ContentLoader({style, ...props}: SkeletonViewContentLoaderProps) {
+    return (
+        <SkeletonViewContentLoader
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            // Using StyleSheet.flatten() because SkeletonViewContentLoader is not able to handle array style notation(eg. style={[style1, style2]}) of style prop
+            style={StyleSheet.flatten(style)}
+        />
+    );
 }
 
 export default ContentLoader;

src/components/SkeletonViewContentLoader/index.native.tsx

@@ -1,10 +1,19 @@
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {CSSProperties} from 'react';
 import SkeletonViewContentLoader from 'react-content-loader';
+import {StyleSheet} from 'react-native';
 import type SkeletonViewContentLoaderProps from './types';
 
-function ContentLoader(props: SkeletonViewContentLoaderProps) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <SkeletonViewContentLoader {...props} />;
+function ContentLoader({style, ...props}: SkeletonViewContentLoaderProps) {
+    return (
+        <SkeletonViewContentLoader
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            // Using StyleSheet.flatten() because SkeletonViewContentLoader is not able to handle array style notation(eg. style={[style1, style2]}) of style prop
+            style={StyleSheet.flatten(style) as CSSProperties}
+        />
+    );
 }
 
 export default ContentLoader;

src/components/SkeletonViewContentLoader/index.tsx

@@ -1,6 +1,6 @@
 import type {IContentLoaderProps} from 'react-content-loader';
 import type {IContentLoaderProps as NativeIContentLoaderProps} from 'react-content-loader/native';
 
-type SkeletonViewContentLoaderProps = IContentLoaderProps & NativeIContentLoaderProps;
+type SkeletonViewContentLoaderProps = Omit<IContentLoaderProps, 'style'> & NativeIContentLoaderProps;
 
 export default SkeletonViewContentLoaderProps;

src/components/SkeletonViewContentLoader/types.ts

@@ -31,7 +31,7 @@ function CardRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEn
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mh5]}
+            itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle

src/components/Skeletons/CardRowSkeleton.tsx

@@ -63,27 +63,24 @@ function ItemListSkeletonView({
         for (let i = 0; i < numItems; i++) {
             const opacity = gradientOpacityEnabled ? 1 - i / (numItems - 1) : 1;
             items.push(
-                <View
+                <SkeletonViewContentLoader
                     key={`skeletonContainer${i}`}
-                    style={[themeStyles.mr5, itemViewStyle, {opacity}]}
+                    animate={shouldAnimate}
+                    height={itemViewHeight}
+                    backgroundColor={theme.skeletonLHNIn}
+                    foregroundColor={theme.skeletonLHNOut}
+                    style={[themeStyles.mr5, itemViewStyle, {opacity}, {minHeight: itemViewHeight}]}
                 >
-                    <SkeletonViewContentLoader
-                        animate={shouldAnimate}
-                        height={itemViewHeight}
-                        backgroundColor={theme.skeletonLHNIn}
-                        foregroundColor={theme.skeletonLHNOut}
-                    >
-                        {renderSkeletonItem({itemIndex: i})}
-                    </SkeletonViewContentLoader>
-                </View>,
+                    {renderSkeletonItem({itemIndex: i})}
+                </SkeletonViewContentLoader>,
             );
         }
         return items;
     }, [numItems, shouldAnimate, theme, themeStyles, renderSkeletonItem, gradientOpacityEnabled, itemViewHeight, itemViewStyle]);
 
     return (
         <View
-            style={[themeStyles.flex1, themeStyles.overflowHidden]}
+            style={[themeStyles.flex1]}
             onLayout={handleLayout}
         >
             {skeletonViewItems}

src/components/Skeletons/ItemListSkeletonView.tsx

@@ -42,7 +42,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
             <View style={[styles.flex1, containerStyle]}>
                 <ItemListSkeletonView
                     itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
-                    itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.mh5]}
+                    itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
                     gradientOpacityEnabled={gradientOpacityEnabled}
                     shouldAnimate={shouldAnimate}
                     fixedNumItems={fixedNumItems}
@@ -126,7 +126,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity
                 shouldAnimate={shouldAnimate}
                 fixedNumItems={fixedNumItems}
                 gradientOpacityEnabled={gradientOpacityEnabled}
-                itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.mh5]}
+                itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
                 renderSkeletonItem={() => (
                     <>
                         <Rect

src/components/Skeletons/SearchRowSkeleton.tsx

@@ -21,7 +21,7 @@ function TableListItemSkeleton({shouldAnimate = true, fixedNumItems, gradientOpa
             shouldAnimate={shouldAnimate}
             fixedNumItems={fixedNumItems}
             gradientOpacityEnabled={gradientOpacityEnabled}
-            itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.mh5]}
+            itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
             renderSkeletonItem={() => (
                 <>
                     <Circle