diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx index 78d2949a43..94978de5b6 100644 --- a/src/components/Typography/Text.tsx +++ b/src/components/Typography/Text.tsx @@ -6,6 +6,7 @@ import { Text as NativeText, TextStyle, } from 'react-native'; +import type { TextProps } from 'react-native'; import AnimatedText from './AnimatedText'; import type { VariantProp } from './types'; @@ -14,6 +15,8 @@ import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; +const TextContext = React.createContext(null); + export type Props = React.ComponentProps & { /** * @supported Available in v5.x with theme version 3 @@ -81,13 +84,14 @@ export type TextRef = React.ForwardedRef<{ * @extends Text props https://reactnative.dev/docs/text#props */ const Text = ( - { style, variant, theme: initialTheme, ...rest }: Props, + { style, variant, theme: initialTheme, children, ...rest }: Props, ref: TextRef ) => { const root = React.useRef(null); // FIXME: destructure it in TS 4.6+ const theme = useInternalTheme(initialTheme); const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; + const parentTextContext = React.useContext(TextContext); React.useImperativeHandle(ref, () => ({ setNativeProps: (args: Object) => root.current?.setNativeProps(args), @@ -98,12 +102,12 @@ const Text = ( let textStyle = [font, style]; if ( - React.isValidElement(rest.children) && - (rest.children.type === Component || - rest.children.type === AnimatedText || - rest.children.type === StyledText) + React.isValidElement(children) && + (children.type === Component || + children.type === AnimatedText || + children.type === StyledText) ) { - const { props } = rest.children; + const { props } = children; // Context: Some components have the built-in `Text` component with a predefined variant, // that also accepts `children` as a `React.Node`. This can result in a situation, @@ -117,7 +121,7 @@ const Text = ( // specified in a parent in favor of children's variant: if (props.variant) { font = theme.fonts[props.variant as VariantProp]; - textStyle = [style, font]; + textStyle = [style, props.style, font]; } // Case two: Nested `Text` has specified `styles` which intefere @@ -149,7 +153,9 @@ const Text = ( textStyle, ]} {...rest} - /> + > + {children} + ); } else { const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular; @@ -157,12 +163,25 @@ const Text = ( ...font, color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text, }; + + if (parentTextContext) { + Object.assign(textStyle, StyleSheet.flatten(parentTextContext.style)); + } + return ( - + + + {children} + + ); } };