From 3389d9bced37d432e4149ce5215b076db29f3cc0 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Sun, 24 Mar 2024 00:30:35 +0530 Subject: [PATCH 1/4] fix: nested text styling not inheriting from parent --- example/src/Examples/TextExample.tsx | 6 +++++ src/components/Typography/Text.tsx | 35 +++++++++++++++++++++------- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index 3fe68001d9..a947057a43 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -11,6 +11,7 @@ import { Subheading, customText, Title, + Text as RNPText, } from 'react-native-paper'; import { useExampleTheme } from '..'; @@ -111,6 +112,11 @@ const TextExample = () => { Custom Variant + + + Nested + Text + )} diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx index 78d2949a43..6213721899 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), @@ -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} + + ); } }; From 8bd74d38da369cece10eece233364e800426153d Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Sun, 14 Jul 2024 03:51:55 +0530 Subject: [PATCH 2/4] fix: typescript errors and run tests --- example/src/Examples/TextExample.tsx | 7 ------- src/components/Typography/Text.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index a947057a43..aeb35cad18 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -11,7 +11,6 @@ import { Subheading, customText, Title, - Text as RNPText, } from 'react-native-paper'; import { useExampleTheme } from '..'; @@ -106,17 +105,11 @@ const TextExample = () => { Body Small - Custom Variant - - - Nested - Text - )} diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx index 6213721899..94978de5b6 100644 --- a/src/components/Typography/Text.tsx +++ b/src/components/Typography/Text.tsx @@ -102,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, From c8615a5030ff5d8fc2fb102a3b5974e3e7648e25 Mon Sep 17 00:00:00 2001 From: Rohit Singh <36300815+rayan1810@users.noreply.github.com> Date: Sun, 14 Jul 2024 03:57:42 +0530 Subject: [PATCH 3/4] fix: remove unrequired change in example --- example/src/Examples/TextExample.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index aeb35cad18..e678910d35 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -105,6 +105,7 @@ const TextExample = () => { Body Small + Custom Variant From a1515fd72824368cc66c8585e37754d6f410e09c Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Sun, 14 Jul 2024 03:59:22 +0530 Subject: [PATCH 4/4] fix: remove unnecessary change in example app --- example/src/Examples/TextExample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx index e678910d35..3fe68001d9 100644 --- a/example/src/Examples/TextExample.tsx +++ b/example/src/Examples/TextExample.tsx @@ -105,7 +105,7 @@ const TextExample = () => { Body Small - + Custom Variant