Merge pull request #43622 from tienifr/fix/42673

fix: badge is not crossed out when deleted offline

src/components/CustomStylesForChildrenProvider.tsx

@@ -0,0 +1,21 @@
+import React, {useMemo} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+
+type CustomStylesForChildrenContextType = StyleProp<ViewStyle & TextStyle> | null;
+
+const CustomStylesForChildrenContext = React.createContext<CustomStylesForChildrenContextType>(null);
+
+type CustomStylesForChildrenProviderProps = React.PropsWithChildren & {
+    style: StyleProp<ViewStyle & TextStyle> | null;
+};
+
+function CustomStylesForChildrenProvider({children, style}: CustomStylesForChildrenProviderProps) {
+    const value = useMemo(() => style, [style]);
+
+    return <CustomStylesForChildrenContext.Provider value={value}>{children}</CustomStylesForChildrenContext.Provider>;
+}
+
+CustomStylesForChildrenProvider.displayName = 'CustomStylesForChildrenProvider';
+
+export default CustomStylesForChildrenProvider;
+export {CustomStylesForChildrenContext};

src/components/OfflineWithFeedback.tsx

@@ -13,6 +13,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ReceiptError, ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import CustomStylesForChildrenProvider from './CustomStylesForChildrenProvider';
 import MessagesRow from './MessagesRow';
 
 /**
@@ -134,7 +135,7 @@ function OfflineWithFeedback({
                     style={[needsOpacity ? styles.offlineFeedback.pending : {}, contentContainerStyle]}
                     needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined}
                 >
-                    {children}
+                    <CustomStylesForChildrenProvider style={needsStrikeThrough ? [styles.offlineFeedback.deleted, styles.userSelectNone] : null}>{children}</CustomStylesForChildrenProvider>
                 </View>
             )}
             {shouldShowErrorMessages && hasErrorMessages && (

src/components/Text.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React from 'react';
+import React, {useContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText, StyleSheet} from 'react-native';
 import type {TextProps as RNTextProps, TextStyle} from 'react-native';
@@ -8,6 +8,7 @@ import type {FontUtilsType} from '@styles/utils/FontUtils';
 import FontUtils from '@styles/utils/FontUtils';
 import variables from '@styles/variables';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import {CustomStylesForChildrenContext} from './CustomStylesForChildrenProvider';
 
 type TextProps = RNTextProps &
     ChildrenProps & {
@@ -29,13 +30,15 @@ type TextProps = RNTextProps &
 
 function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
     const theme = useTheme();
+    const customStyle = useContext(CustomStylesForChildrenContext);
 
     const componentStyle: TextStyle = {
         color: color ?? theme.text,
         fontSize,
         textAlign,
         fontFamily: FontUtils.fontFamily.platform[family],
         ...StyleSheet.flatten(style),
+        ...StyleSheet.flatten(customStyle),
     };
 
     if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {