From e7b4d3748e0b548994fad472deccc8ba424886cd Mon Sep 17 00:00:00 2001
From: Mak <Mak>
Date: Sun, 22 Sep 2024 23:22:11 +0530
Subject: [PATCH] #2715 Override text-transform: capitalize behavior in Text
 component to match with react-native

---
 packages/react-native-web/src/exports/Text/index.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 071ae1025..604bea97b 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -121,6 +121,10 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     const componentDirection = props.dir || langDirection;
     const writingDirection = componentDirection || contextDirection;
 
+    const capitalizeText = (text) => {
+      return text.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
+    };
+
     const supportedProps = pickProps(rest);
     supportedProps.dir = componentDirection;
     // 'auto' by default allows browsers to infer writing direction (root elements only)
@@ -145,6 +149,15 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
       onPress && styles.pressable
     ];
 
+    if (props.style && props.style.textTransform === 'capitalize') {
+      supportedProps.children = React.Children.map(props.children, child => {
+        if (typeof child === 'string') {
+          return capitalizeText(child);
+        }
+        return child;
+      });
+    }
+    
     if (props.href != null) {
       component = 'a';
       if (hrefAttrs != null) {