fix: nested text styling not inheriting from parent

Author: rayan1810

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
               </Text>
             </PaperProvider>
+
+            <RNPText style={{ color: 'red' }}>
+              <RNPText>Nested </RNPText>
+              Text
+            </RNPText>
           </>
         )}
       </View>

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<TextProps | null>(null);
+
 export type Props<T> = React.ComponentProps<typeof NativeText> & {
   /**
    * @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<string>,
+  { style, variant, theme: initialTheme, children, ...rest }: Props<string>,
   ref: TextRef
 ) => {
   const root = React.useRef<NativeText | null>(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<typeof props.variant>];
-        textStyle = [style, font];
+        textStyle = [style, props.style, font];
       }
 
       // Case two:  Nested `Text` has specified `styles` which intefere
@@ -149,20 +153,35 @@ const Text = (
           textStyle,
         ]}
         {...rest}
-      />
+      >
+        {children}
+      </NativeText>
     );
   } else {
     const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular;
     const textStyle = {
       ...font,
       color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
     };
+
+    if (parentTextContext) {
+      Object.assign(textStyle, StyleSheet.flatten(parentTextContext.style));
+    }
+
     return (
-      <NativeText
-        {...rest}
-        ref={root}
-        style={[styles.text, textStyle, { writingDirection }, style]}
-      />
+      <TextContext.Provider
+        value={{
+          style: [styles.text, textStyle, { writingDirection }, style],
+        }}
+      >
+        <NativeText
+          {...rest}
+          ref={root}
+          style={[styles.text, textStyle, { writingDirection }, style]}
+        >
+          {children}
+        </NativeText>
+      </TextContext.Provider>
     );
   }
 };