Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix disappearing background on Search page #52481

Merged
merged 10 commits into from
Nov 21, 2024
Merged

Fix disappearing background on Search page #52481

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0081946
fix disappearing bg
SzymczakJ Nov 13, 2024
5ec0ffc
fix PR comments
SzymczakJ Nov 13, 2024
a4e9afd
fix styling
SzymczakJ Nov 13, 2024
725e875
fix typing
SzymczakJ Nov 13, 2024
4c9a883
fix mweb styles
SzymczakJ Nov 14, 2024
19bd597
Merge branch 'main' into @szymczak/fix-disappearing-bg
SzymczakJ Nov 14, 2024
211cf17
bump react-native-svg so that styling Svg on android works
SzymczakJ Nov 14, 2024
57a99f0
include podfile lock
SzymczakJ Nov 14, 2024
f41206a
Merge branch 'main' into @szymczak/fix-disappearing-bg
SzymczakJ Nov 20, 2024
cb929cb
Merge branch 'main' into @szymczak/fix-disappearing-bg
SzymczakJ Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -3273,7 +3273,7 @@ SPEC CHECKSUMS:
RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
RNShare: bd4fe9b95d1ee89a200778cc0753ebe650154bb0
RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852
RNSVG: 1079f96b39a35753d481a20e30603fd6fc4f6fa9
RNSVG: b2fbe96b2bb3887752f8abc1f495953847e90384
SDWebImage: 066c47b573f408f18caa467d71deace7c0f8280d
SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
Expand Down
9 changes: 5 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to bump react-native-svg, because styling components was broken on android in previous versions.

"react-native-tab-view": "^3.5.2",
"react-native-url-polyfill": "^2.0.0",
"react-native-view-shot": "3.8.0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/OptionsListSkeletonView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
13 changes: 10 additions & 3 deletions src/components/SkeletonViewContentLoader/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 12 additions & 3 deletions src/components/SkeletonViewContentLoader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/components/SkeletonViewContentLoader/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/components/Skeletons/CardRowSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 9 additions & 12 deletions src/components/Skeletons/ItemListSkeletonView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Skeletons/SearchRowSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/Skeletons/TableRowSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading