Fixing text components not rendering a border with Paper (#14054)

slswalker · sawalkerXbox · jonthysell · web-flow · commit dc70ca2393eb · 2024-11-01T18:09:09.000Z
## Description Text components rendered in Paper need to have check if the style they are rendering contains border style props. This bug occurs when the passed in style is an array. From what I can tell, this bug has existed for a long time, possibly forever. [4 Years Ago](946ba7f) This PR fixed borders not rendering for text, but did not address text components with an array of styles. [3 Years Ago](ee4d83d#diff-5beb08e50a61de475cd20c6e68588ac3a5cd687a971883167fe75fc97a0dbdea) This PR changes naming, but not the logic. This PR switches the style that is checked for border props from the one that is passed in to the one that is flattened. This is the type of JSX that is broken. The text does not render a border. ```tsx <Text style={[{ borderColor: "red", borderWidth: 3 }]}>{"hello world"}</Text> ``` ### Type of Change - Bug fix (non-breaking change which fixes an issue) ### Why This reenables borders for Paper text components. ### What Swapped a variable in text.window.js that is used to check for border style props. ## Screenshots Add any relevant screen captures here from before or after your changes. ## Testing Local tests. ## Changelog Fixing text components not rendering a border with Paper --------- Co-authored-by: Sam Walker <sawalker@microsoft.com> Co-authored-by: Jon Thysell <thysell@gmail.com>
diff --git a/change/react-native-windows-154312b4-b03a-41b3-99e3-905475325a8a.json b/change/react-native-windows-154312b4-b03a-41b3-99e3-905475325a8a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixing text components not rendering a border with Paper",
+  "packageName": "react-native-windows",
+  "email": "sawalker@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/src-win/Libraries/Text/Text.windows.js b/vnext/src-win/Libraries/Text/Text.windows.js
@@ -324,7 +324,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
 
       // [Windows
       // $FlowFixMe[unclear-type]
-      let styleProps: ViewStyleProp = (style: any); // Flow style type casting
+      let styleProps: ViewStyleProp = (processedStyle: any); // Flow style type casting
       if (
         global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view
         styleProps &&
