Fix case when dashed/dotted borders do not work with overflow: hidden (…

…facebook#48414)

Summary:

Was looking into facebook#48078 which was brought to my attention due to my recent refactorings of iOS Views, especially around how overflow: hidden works. This bug was not brought on by my changes but seems to be a lingering Fabric bug (iirc this bool was not changed when I refactored things)

Anyway, dotted/dashed borders did not work with overflow: hidden. The reason why is we use core animation borders in this case which is incorrect as CA cannot do these types of borders. So I added a check to make sure that the borders are solid as well if we want to use CA to draw them.

Changelog: [iOS] [Fixed] - Dashed & dotted borders now work with overflow: hidden

Reviewed By: mdvacca

Differential Revision: D67720492

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -853,7 +853,8 @@ - (void)invalidateLayer
 #endif
   const bool useCoreAnimationBorderRendering =
       borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
-      borderMetrics.borderStyles.isUniform() && borderMetrics.borderRadii.isUniform() &&
+      borderMetrics.borderStyles.isUniform() && borderMetrics.borderStyles.left == BorderStyle::Solid &&
+      borderMetrics.borderRadii.isUniform() &&
       (
           // iOS draws borders in front of the content whereas CSS draws them behind
           // the content. For this reason, only use iOS border drawing when clipping

packages/rn-tester/js/examples/Border/BorderExample.js

@@ -588,6 +588,14 @@ export default ({
             <View style={[styles.smallBox, styles.borderWithChildren2]}>
               <View style={[styles.childOfBorder, {left: -15, top: 0}]} />
             </View>
+            <View
+              style={[
+                styles.smallBox,
+                styles.borderWithChildren2,
+                {borderStyle: 'dashed', overflow: 'hidden'},
+              ]}>
+              <View style={[styles.childOfBorder, {left: -15, top: 0}]} />
+            </View>
           </View>
         );
       },