From ce5eee0fa0104dffecc294c249dd546aef70490a Mon Sep 17 00:00:00 2001
From: Jason Zheng <jasonqzheng@meta.com>
Date: Tue, 29 Sep 2026 23:43:07 -0700
Subject: [PATCH] Add TextInput example in ScrollViewExample

Summary:
Add a new RNTester example in ScrollViewExample for using the component with TextInputs. This reproduces the issue where TextInputs on Android absorb scroll gestures when textAlign is set to "center" or "right". For TextInputs inside a ScrollView, starting a scroll gesture on the TextInput would not scroll the ScrollView. As this is a common use case, the example acts as a reference to show intended behavior and prevent future regressions.

Changelog: [Internal]

Differential Revision: D122199421
---
 .../examples/ScrollView/ScrollViewExample.js  | 144 +++++++++++++++++-
 1 file changed, 143 insertions(+), 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index ef937f99089c..2d95829394f3 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -470,6 +470,22 @@ const examples: Array<RNTesterModuleExample> = [
       return <ChildrenWithTouchEventsOverflowingContainerHorizontal />;
     },
   },
+  {
+    title: '<ScrollView> TextInputs\n',
+    description:
+      'Vertical scroll gestures on a TextInput should scroll the ScrollView unless the input can also scroll vertically.',
+    render(): React.Node {
+      return <VerticalScrollTextInputs />;
+    },
+  },
+  {
+    title: '<ScrollView> TextInputs (horizontal = true)\n',
+    description:
+      'Horizontal scroll gestures on a TextInput should scroll the ScrollView unless the input can also scroll horizontally.',
+    render(): React.Node {
+      return <HorizontalScrollTextInputs />;
+    },
+  },
 ];
 
 if (Platform.OS === 'ios') {
@@ -611,6 +627,131 @@ const ScrollsChildToFocusExample = () => {
   );
 };
 
+const VerticalScrollTextInputs = () => {
+  const _verticalScrollView =
+    useRef<?React.ElementRef<typeof ScrollView>>(null);
+  const [verticalScrolled, setVerticalScrolled] = useState(false);
+
+  return (
+    <View>
+      <RNTesterText style={styles.text}>
+        scrolled = {verticalScrolled ? 'true' : 'false'}
+      </RNTesterText>
+      <ScrollView
+        ref={_verticalScrollView}
+        style={{backgroundColor: '#eeeeee', height: 350}}
+        contentContainerStyle={{padding: 10, gap: 20}}
+        nestedScrollEnabled
+        onScroll={event => {
+          setVerticalScrolled(event.nativeEvent.contentOffset.y > 0);
+        }}>
+        <TextInput placeholder="TextInput" style={styles.textInput} />
+        <TextInput
+          placeholder="TextInput (center)"
+          style={styles.textInput}
+          textAlign="center"
+        />
+        <TextInput
+          placeholder="TextInput (right)"
+          style={styles.textInput}
+          textAlign="right"
+        />
+        <TextInput
+          defaultValue={
+            'A TextInput with a value that overflows the input width so it can be scrolled horizontally.'
+          }
+          placeholder="TextInput"
+          style={styles.textInput}
+        />
+        <TextInput
+          defaultValue={
+            'A multiline TextInput\nwith a value that\noverflows the input\nheight so it can be\nscrolled vertically.'
+          }
+          placeholder="TextInput"
+          style={styles.textInput}
+          multiline
+        />
+        <View
+          style={[styles.textInput, {backgroundColor: '#cccccc', height: 200}]}
+        />
+      </ScrollView>
+      <Button
+        label="Scroll to top"
+        onPress={() => {
+          nullthrows<$FlowFixMe>(_verticalScrollView.current).scrollTo({
+            y: 0,
+          });
+        }}
+      />
+    </View>
+  );
+};
+
+const HorizontalScrollTextInputs = () => {
+  const _horizontalScrollView =
+    useRef<?React.ElementRef<typeof ScrollView>>(null);
+  const [horizontalScrolled, setHorizontalScrolled] = useState(false);
+
+  return (
+    <View>
+      <RNTesterText style={styles.text} testID="horizontal_status">
+        scrolled = {horizontalScrolled ? 'true' : 'false'}
+      </RNTesterText>
+      <ScrollView
+        ref={_horizontalScrollView}
+        style={{backgroundColor: '#eeeeee'}}
+        contentContainerStyle={{padding: 10, gap: 20}}
+        nestedScrollEnabled
+        horizontal
+        onScroll={event => {
+          setHorizontalScrolled(event.nativeEvent.contentOffset.x > 0);
+        }}>
+        <View
+          style={[
+            styles.textInput,
+            {backgroundColor: '#cccccc', width: 100, height: '100%'},
+          ]}
+        />
+        <View style={{gap: 20}}>
+          <TextInput
+            placeholder="TextInput"
+            style={[styles.textInput, {width: 200}]}
+          />
+          <TextInput
+            defaultValue={
+              'A TextInput with a value that overflows the input width so it can be scrolled horizontally.'
+            }
+            placeholder="TextInput"
+            style={[styles.textInput, {width: 200}]}
+          />
+          <TextInput
+            defaultValue={
+              'A multiline TextInput\nwith a value that\noverflows the input\nheight so it can be\nscrolled vertically.'
+            }
+            placeholder="TextInput"
+            style={[styles.textInput, {width: 200}]}
+            multiline
+          />
+        </View>
+        <View
+          style={[
+            styles.textInput,
+            {backgroundColor: '#cccccc', width: 100, height: '100%'},
+          ]}
+        />
+      </ScrollView>
+      <Button
+        label="Scroll to start"
+        onPress={() => {
+          nullthrows<$FlowFixMe>(_horizontalScrollView.current).scrollTo({
+            x: 0,
+          });
+        }}
+      />
+    </View>
+  );
+};
+
 const HorizontalScrollView = (props: {
   direction: 'ltr' | 'rtl',
   itemCount?: number,
@@ -1554,8 +1695,9 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   textInput: {
-    height: 40,
+    height: 48,
     borderColor: 'gray',
     borderWidth: 1,
+    paddingHorizontal: 10,
   },
 });