diff --git a/src/components/CustomStylesForChildrenProvider.tsx b/src/components/CustomStylesForChildrenProvider.tsx new file mode 100644 index 000000000000..6fc7efa81ed8 --- /dev/null +++ b/src/components/CustomStylesForChildrenProvider.tsx @@ -0,0 +1,21 @@ +import React, {useMemo} from 'react'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; + +type CustomStylesForChildrenContextType = StyleProp | null; + +const CustomStylesForChildrenContext = React.createContext(null); + +type CustomStylesForChildrenProviderProps = React.PropsWithChildren & { + style: StyleProp | null; +}; + +function CustomStylesForChildrenProvider({children, style}: CustomStylesForChildrenProviderProps) { + const value = useMemo(() => style, [style]); + + return {children}; +} + +CustomStylesForChildrenProvider.displayName = 'CustomStylesForChildrenProvider'; + +export default CustomStylesForChildrenProvider; +export {CustomStylesForChildrenContext}; diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx index 70354c4a4676..28e1d81b30e4 100644 --- a/src/components/OfflineWithFeedback.tsx +++ b/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} + {children} )} {shouldShowErrorMessages && hasErrorMessages && ( diff --git a/src/components/Text.tsx b/src/components/Text.tsx index b94530a423f7..7d2303e31066 100644 --- a/src/components/Text.tsx +++ b/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,6 +30,7 @@ type TextProps = RNTextProps & function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { const theme = useTheme(); + const customStyle = useContext(CustomStylesForChildrenContext); const componentStyle: TextStyle = { color: color ?? theme.text, @@ -36,6 +38,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c textAlign, fontFamily: FontUtils.fontFamily.platform[family], ...StyleSheet.flatten(style), + ...StyleSheet.flatten(customStyle), }; if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {