Fix Text component padding touch area on iOS (Fabric)

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm

@@ -260,18 +260,18 @@ - (SharedEventEmitter)getEventEmitterWithAttributeString:(AttributedString)attri
       _textStorageAndLayoutManagerWithAttributesString:[self _nsAttributedStringFromAttributedString:attributedString]
                                    paragraphAttributes:paragraphAttributes
                                                   size:frame.size];
+
   NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
   NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
 
   CGFloat fraction;
   NSUInteger characterIndex = [layoutManager characterIndexForPoint:point
-                                                    inTextContainer:textContainer
-                           fractionOfDistanceBetweenInsertionPoints:&fraction];
+                                                     inTextContainer:textContainer
+                                            fractionOfDistanceBetweenInsertionPoints:&fraction];
 
-  // If the point is not before (fraction == 0.0) the first character and not
-  // after (fraction == 1.0) the last character, then the attribute is valid.
-  if (textStorage.length > 0 && (fraction > 0 || characterIndex > 0) &&
-      (fraction < 1 || characterIndex < textStorage.length - 1)) {
+  // Modified: Allow clicks anywhere in the text storage bounds, not just on characters
+  // This fixes the issue where padding areas are not clickable
+  if (textStorage.length > 0 && characterIndex < textStorage.length) {
     NSData *eventEmitterWrapper = (NSData *)[textStorage attribute:RCTAttributedStringEventEmitterKey
                                                            atIndex:characterIndex
                                                     effectiveRange:NULL];

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -1574,6 +1574,77 @@ const examples = [
       );
     },
   },
+  {
+    title: 'Text with Padding - Touch Area Test (Issue #54056)',
+    name: 'textPaddingTouchArea',
+    render: function (): React.Node {
+      const [count, setCount] = React.useState(0);
+      return (
+        <View testID="text-padding-touch-test">
+          <Text style={{marginBottom: 10, color: '#666', fontSize: 14}}>
+            Click on the BLUE padding area (not the text itself):
+          </Text>
+          <Text
+            onPress={() => {
+              setCount(count + 1);
+            }}
+            style={{
+              padding: 50,
+              backgroundColor: 'lightblue',
+              fontSize: 20,
+              marginBottom: 10,
+            }}>
+            Click me!
+          </Text>
+          <Text style={{fontSize: 16, fontWeight: 'bold'}}>
+            Touch count: {count}
+          </Text>
+          <Text style={{marginTop: 5, fontSize: 12, color: '#666'}}>
+            Expected: Both padding AND text should be clickable
+          </Text>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Text Padding Boundary Test (Issue #54056)',
+    name: 'textPaddingBoundaryTest',
+    render: function (): React.Node {
+      const [lastTouch, setLastTouch] = React.useState('None');
+      return (
+        <View testID="text-padding-boundary-test">
+          <Text style={{marginBottom: 10, color: '#666', fontSize: 14}}>
+            The blue text should only capture touches within its bounds:
+          </Text>
+          <View
+            style={{
+              width: 300,
+              height: 300,
+              backgroundColor: 'pink',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onTouchEnd={() => setLastTouch('Container')}>
+            <Text
+              onPress={() => setLastTouch('Text (including padding)')}
+              style={{
+                padding: 30,
+                backgroundColor: 'lightblue',
+                fontSize: 16,
+              }}>
+              Small text with padding
+            </Text>
+          </View>
+          <Text style={{marginTop: 10, fontSize: 16, fontWeight: 'bold'}}>
+            Last touch: {lastTouch}
+          </Text>
+          <Text style={{fontSize: 12, color: '#666', marginTop: 5}}>
+            Expected: Pink area outside blue text should show "Container"
+          </Text>
+        </View>
+      );
+    },
+  },
   ...TextSharedExamples,
 ];