From 00819465380ad94f60faf6ab0437b6e36140744b Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 13 Nov 2024 14:58:18 +0100 Subject: [PATCH 1/7] fix disappearing bg --- .../Skeletons/ItemListSkeletonView.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/Skeletons/ItemListSkeletonView.tsx b/src/components/Skeletons/ItemListSkeletonView.tsx index 046cdfffbee5..df90ce614b9b 100644 --- a/src/components/Skeletons/ItemListSkeletonView.tsx +++ b/src/components/Skeletons/ItemListSkeletonView.tsx @@ -1,4 +1,6 @@ import React, {useCallback, useMemo, useState} from 'react'; +// eslint-disable-next-line no-restricted-imports +import type {CSSProperties} from 'react'; import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; @@ -63,19 +65,15 @@ function ItemListSkeletonView({ for (let i = 0; i < numItems; i++) { const opacity = gradientOpacityEnabled ? 1 - i / (numItems - 1) : 1; items.push( - - - {renderSkeletonItem({itemIndex: i})} - - , + {renderSkeletonItem({itemIndex: i})} + , ); } return items; From 5ec0ffc6f7224eb97efac1446c0a0ad61916f4ea Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 13 Nov 2024 15:43:39 +0100 Subject: [PATCH 2/7] fix PR comments --- .../SkeletonViewContentLoader/index.native.tsx | 13 ++++++++++--- .../SkeletonViewContentLoader/index.tsx | 15 ++++++++++++--- src/components/Skeletons/ItemListSkeletonView.tsx | 2 +- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/SkeletonViewContentLoader/index.native.tsx b/src/components/SkeletonViewContentLoader/index.native.tsx index 6d275e065bb0..afd58361947a 100644 --- a/src/components/SkeletonViewContentLoader/index.native.tsx +++ b/src/components/SkeletonViewContentLoader/index.native.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 ; +function ContentLoader({style, ...props}: SkeletonViewContentLoaderProps) { + return ( + + ); } export default ContentLoader; diff --git a/src/components/SkeletonViewContentLoader/index.tsx b/src/components/SkeletonViewContentLoader/index.tsx index ad3858a2d8d4..cab7710d02ee 100644 --- a/src/components/SkeletonViewContentLoader/index.tsx +++ b/src/components/SkeletonViewContentLoader/index.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 ; +function ContentLoader({style, ...props}: SkeletonViewContentLoaderProps) { + return ( + + ); } export default ContentLoader; diff --git a/src/components/Skeletons/ItemListSkeletonView.tsx b/src/components/Skeletons/ItemListSkeletonView.tsx index df90ce614b9b..69b20255ddf1 100644 --- a/src/components/Skeletons/ItemListSkeletonView.tsx +++ b/src/components/Skeletons/ItemListSkeletonView.tsx @@ -70,7 +70,7 @@ function ItemListSkeletonView({ animate={shouldAnimate} height={itemViewHeight} backgroundColor={theme.skeletonLHNIn} - style={StyleSheet.flatten([themeStyles.mr5, itemViewStyle, {opacity}]) as ViewStyle & CSSProperties} // using StyleSheet.flatten() because SkeletonViewContentLoader is not able to handle array style notation(eg. style={[style1, style2]}) of style prop + style={[themeStyles.mr5, itemViewStyle, {opacity}] as StyleProp & CSSProperties} > {renderSkeletonItem({itemIndex: i})} , From a4e9afd87be74bf20a2657581e6b959d945da8eb Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 13 Nov 2024 16:46:32 +0100 Subject: [PATCH 3/7] fix styling --- src/components/OptionsListSkeletonView.tsx | 2 +- src/components/Skeletons/CardRowSkeleton.tsx | 2 +- src/components/Skeletons/ItemListSkeletonView.tsx | 1 + src/components/Skeletons/SearchRowSkeleton.tsx | 4 ++-- src/components/Skeletons/TableRowSkeleton.tsx | 2 +- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/OptionsListSkeletonView.tsx b/src/components/OptionsListSkeletonView.tsx index b6333c16e23c..032bf01f5a10 100644 --- a/src/components/OptionsListSkeletonView.tsx +++ b/src/components/OptionsListSkeletonView.tsx @@ -28,7 +28,7 @@ function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = fal return ( { const lineWidth = getLinedWidth(itemIndex); diff --git a/src/components/Skeletons/CardRowSkeleton.tsx b/src/components/Skeletons/CardRowSkeleton.tsx index d0e14b2bbb9a..24a2f8826908 100644 --- a/src/components/Skeletons/CardRowSkeleton.tsx +++ b/src/components/Skeletons/CardRowSkeleton.tsx @@ -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={() => ( <> & CSSProperties} > {renderSkeletonItem({itemIndex: i})} diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx index 3535ba329a90..53f5aaa6065b 100644 --- a/src/components/Skeletons/SearchRowSkeleton.tsx +++ b/src/components/Skeletons/SearchRowSkeleton.tsx @@ -42,7 +42,7 @@ function SearchRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacity ( <> ( <> Date: Wed, 13 Nov 2024 17:06:01 +0100 Subject: [PATCH 4/7] fix typing --- src/components/SkeletonViewContentLoader/types.ts | 2 +- src/components/Skeletons/ItemListSkeletonView.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/SkeletonViewContentLoader/types.ts b/src/components/SkeletonViewContentLoader/types.ts index 5f4089f316dd..de1bdef558ef 100644 --- a/src/components/SkeletonViewContentLoader/types.ts +++ b/src/components/SkeletonViewContentLoader/types.ts @@ -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 & NativeIContentLoaderProps; export default SkeletonViewContentLoaderProps; diff --git a/src/components/Skeletons/ItemListSkeletonView.tsx b/src/components/Skeletons/ItemListSkeletonView.tsx index 7039fd971c2c..815a93c5dc7c 100644 --- a/src/components/Skeletons/ItemListSkeletonView.tsx +++ b/src/components/Skeletons/ItemListSkeletonView.tsx @@ -1,6 +1,4 @@ import React, {useCallback, useMemo, useState} from 'react'; -// eslint-disable-next-line no-restricted-imports -import type {CSSProperties} from 'react'; import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native'; import {StyleSheet, View} from 'react-native'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; @@ -71,7 +69,7 @@ function ItemListSkeletonView({ height={itemViewHeight} backgroundColor={theme.skeletonLHNIn} foregroundColor={theme.skeletonLHNOut} - style={[themeStyles.mr5, itemViewStyle, {opacity}] as StyleProp & CSSProperties} + style={[themeStyles.mr5, itemViewStyle, {opacity}]} > {renderSkeletonItem({itemIndex: i})} , From 4c9a883227273fbe89923ed4d2236b370e673344 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 14 Nov 2024 10:55:21 +0100 Subject: [PATCH 5/7] fix mweb styles --- src/components/Skeletons/ItemListSkeletonView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Skeletons/ItemListSkeletonView.tsx b/src/components/Skeletons/ItemListSkeletonView.tsx index 815a93c5dc7c..f0dea9283b57 100644 --- a/src/components/Skeletons/ItemListSkeletonView.tsx +++ b/src/components/Skeletons/ItemListSkeletonView.tsx @@ -69,7 +69,7 @@ function ItemListSkeletonView({ height={itemViewHeight} backgroundColor={theme.skeletonLHNIn} foregroundColor={theme.skeletonLHNOut} - style={[themeStyles.mr5, itemViewStyle, {opacity}]} + style={[themeStyles.mr5, itemViewStyle, {opacity}, {minHeight: itemViewHeight}]} > {renderSkeletonItem({itemIndex: i})} , @@ -80,7 +80,7 @@ function ItemListSkeletonView({ return ( {skeletonViewItems} From 211cf172de49cfc9ed999c32f6fac618a54801e4 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 14 Nov 2024 13:02:36 +0100 Subject: [PATCH 6/7] bump react-native-svg so that styling Svg on android works --- package-lock.json | 9 +++++---- package.json | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index f4ecbdef7201..ff488aeaebdd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -111,7 +111,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", @@ -35766,9 +35766,10 @@ } }, "node_modules/react-native-svg": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.6.0.tgz", - "integrity": "sha512-TUtR+h+yi1ODsd8FHdom1TpjfWOmnaK5pri5rnSBXnMqpzq8o2zZfonHTjPX+nS3wb/Pu2XsoARgYaHNjVWXhQ==", + "version": "15.9.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.9.0.tgz", + "integrity": "sha512-pwo7hteAM0P8jNpPGQtiSd0SnbBhE8tNd94LT8AcZcbnH5AJdXBIcXU4+tWYYeGUjiNAH2E5d0T5XIfnvaz1gA==", + "license": "MIT", "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", diff --git a/package.json b/package.json index 52f70c646546..49312db46393 100644 --- a/package.json +++ b/package.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", From 57a99f0ba2dfb0acbd4f75fa6a89b2ebfa95cf17 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Thu, 14 Nov 2024 13:04:16 +0100 Subject: [PATCH 7/7] include podfile lock --- ios/Podfile.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 6efc4d1a5eff..ab68969d0c4d 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -2639,7 +2639,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 @@ -2659,9 +2659,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 @@ -3273,7 +3273,7 @@ SPEC CHECKSUMS: RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2 RNShare: bd4fe9b95d1ee89a200778cc0753ebe650154bb0 RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852 - RNSVG: 1079f96b39a35753d481a20e30603fd6fc4f6fa9 + RNSVG: b2fbe96b2bb3887752f8abc1f495953847e90384 SDWebImage: 066c47b573f408f18caa467d71deace7c0f8280d SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90 SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c