TextInput prevent scroll on ScrollView

In a too long form, scroll is only available if the touch start outside the TextInput fields

React Native version:

info Fetching system and libraries information...
System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
    Memory: 1.92 GB / 7.67 GB
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 8.10.0 - /usr/bin/node
    npm: 3.5.2 - /usr/bin/npm
  SDKs:
    Android SDK:
      API Levels: 22, 23, 26, 27, 28
      Build Tools: 23.0.1, 27.0.3, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-debugger: 1.1.0
    react-native: 0.59.3

Steps To Reproduce

create a ScrollView with flex: 1
put more TextInputs than your screen can handle
try to scroll with your touch starting on a field

Describe what you expected to happen:

I expect the page to scroll

Snack, code example, or link to a repository:

     <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <View style={{ height: 150, }} />
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
        </ScrollView>

snack: https://snack.expo.io/@aiiros/react-native-issue-25594

this is a duplicate of #15962 which has not yet been answered.

Edit:
Turns out textAlign='center' is causing all of this

@Aiiros

Hi @Aiiros,

I tried to reproduce your issue on Expo Snack: https://snack.expo.io/@robincsl/https:-github.com-facebook-react-native-issues-25594

and it seems to be working as intended: the TextInput components won't respond to touch when scrolling.

Can you provide a Snack/repository where you encounter this issue? This would help to reproduce it.

@RobinCsl

Hi @RobinCsl , thanks for answering.

After your example i stripped down my code to find out that textAlign="center" was causing all of this.
Of course i need to keep it :/

expo exemple : https://snack.expo.io/@aiiros/react-native-issue-25594

Exact same issue here, without textAlign="center" everything works fine.
I also noticed that it will work if you set multiline={true}, however I need it to be single line

Also I am on a mac, so I guess we can remove the Linux tag?

@RobinCsl

@RobinCsl
I quickly changed your snack to show the issue. For the textInputs that are centering their text the scrolling doesn't work.

https://snack.expo.io/@markuscosinus/https:-github.com-facebook-react-native-issues-25594

@markuscosinus and this happens only on Android, right?

style={{textAlign: "right"}} shows the same behaviour as style={{textAlign: "center"}}. However, style={{textAlign: "left"}} works fine.

And yes, multiline={true} with style={{textAlign: "center"}} makes it work too.

Might be time to dig into the native code deciding on this behaviour! 🙂

I don't have an iOS device, but it works fine on the simulator.

Might be time to dig into the native code deciding on this behaviour! 🙂

That would be amazing. Thanks a lot!

It seems like this would be the place where touch events are handled:
https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L156-L179

@Override
  public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
      case MotionEvent.ACTION_DOWN:
        mDetectScrollMovement = true;
        // Disallow parent views to intercept touch events, until we can detect if we should be
        // capturing these touches or not.
        this.getParent().requestDisallowInterceptTouchEvent(true);
        break;
      case MotionEvent.ACTION_MOVE:
        if (mDetectScrollMovement) {
          if (!canScrollVertically(-1)
              && !canScrollVertically(1)
              && !canScrollHorizontally(-1)
              && !canScrollHorizontally(1)) {
            // We cannot scroll, let parent views take care of these touches.
            this.getParent().requestDisallowInterceptTouchEvent(false);
          }
          mDetectScrollMovement = false;
        }
        break;
    }
    return super.onTouchEvent(ev);
  }

I don't know Java enough, but my guess is that setting the alignment to center or right somehow makes the component think that it can scroll vertically or horizontally. I'm referring to this block:
https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L167-L173

          if (!canScrollVertically(-1)
              && !canScrollVertically(1)
              && !canScrollHorizontally(-1)
              && !canScrollHorizontally(1)) {
            // We cannot scroll, let parent views take care of these touches.
            this.getParent().requestDisallowInterceptTouchEvent(false);
          }

and searching the whole codebase for canScrollVertically or for canScrollHorizontally does not yield anything apart from the occurrences in this file.

I must say I'm a bit confused!

I don't know Java enough, but my guess is that setting the alignment to center or right somehow makes the component think that it can scroll vertically or horizontally.

That sounds logical.

and searching the whole codebase for canScrollVertically or for canScrollHorizontally does not yield anything apart from the occurrences in this file

canScrollHorizontally seems to be an method provided by android:
https://developer.android.com/reference/android/view/View.html#canScrollHorizontally(int)

But I have no idea, why it would return true just because of the text alignment

Okay, I think I found a solution!

I will create a PR later today!

Any updates ?

I'd like to bump this issue as well. Still noticing this today.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Bumping this

we need a fix !!!

This plagues both center and right.

When I came across the Stack Overflow from 9 years ago I assumed there'd be a fix by now -- little did I know...

"react": "19.1.0",
"react-native": "0.81.4",
issue also exist

Using multiline appears to work around this RTL/right-aligned TextInput scroll issue. However, it is not a complete solution for our case because secureTextEntry becomes ineffective when multiline is enabled.

My workaround is to place an extra layer on top of the input to block direct touch interaction with the native TextInput by default. That overlay is only used to detect a press/tap from the user, and once pressed it forwards focus to the real input. The goal is to prevent the input from capturing scroll gestures immediately while still allowing the user to activate editing intentionally.

This is the approach I used as a workaround:

export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextInput>) {
  const { status, style: $inputStyleOverride, ...TextInputProps } = props

  const {
    themed,
    theme: { colors },
    themeContext,
  } = useAppTheme()
  const input = useRef<TextInput>(null)
  const [isFocused, setIsFocused] = useState(false)

  const disabled = TextInputProps.editable === false || status === "disabled"

  const $inputStyles: ThemedStyleArray<TextStyle> = [
    disabled && { color: colors.textDim },
    isRTL && { textAlign: "right" },
    TextInputProps.multiline && { height: "auto" },
    $inputStyleOverride,
  ]

  //* Flat style to get the resolved text align
  const resolvedTextAlign = StyleSheet.flatten(themed($inputStyles))?.textAlign
  //* Gesture overlay to fix text align for RTL
  const shouldUseGestureOverlay =
    !isFocused && !TextInputProps.multiline && resolvedTextAlign === "right"

  function focusInput() {
    if (disabled) return

    input.current?.focus()
  }

  const focusGesture = Gesture.Tap()
    .enabled(shouldUseGestureOverlay)
    .maxDistance(8)
    .onEnd((_event, success) => {
      if (success) runOnJS(focusInput)()
    })

  useImperativeHandle(ref, () => input.current as TextInput)

  return (
    <View style={themed($inputContainer)}>
      <TextInput
        ref={input}
        underlineColorAndroid={colors.transparent}
        textAlignVertical="top"
        {...TextInputProps}
        editable={!disabled}
        style={themed($inputStyles)}
        onFocus={(e) => {
          setIsFocused(true)
          TextInputProps.onFocus?.(e)
        }}
        onBlur={(e) => {
          setIsFocused(false)
          TextInputProps.onBlur?.(e)
        }}
        keyboardAppearance={themeContext ?? "light"}
      />

      {shouldUseGestureOverlay && (
        <GestureDetector gesture={focusGesture}>
          <View style={themed($gestureOverlay)} />
        </GestureDetector>
      )}
    </View>
  )
})

const $inputContainer: ThemedStyle<ViewStyle> = () => ({
  position: "relative",
  flex: 1,
})

const $gestureOverlay: ThemedStyle<ViewStyle> = () => ({
  ...StyleSheet.absoluteFillObject,
})

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Fix TextInput absorbing scroll gestures on Android (react#58678)

Fix TextInput absorbing scroll gestures on Android (#58678)

Navigation Menu

Repository navigation

TextInput prevent scroll on ScrollView #25594

Steps To Reproduce

50 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextInput prevent scroll on ScrollView #25594

Description

Steps To Reproduce

Activity

RobinCsl commented on Jul 14, 2019

Aiiros commented on Jul 16, 2019

markus-utke commented on Jul 16, 2019

markus-utke commented on Jul 19, 2019

markus-utke commented on Jul 19, 2019

RobinCsl commented on Jul 19, 2019

markus-utke commented on Jul 19, 2019

RobinCsl commented on Jul 19, 2019

markus-utke commented on Jul 19, 2019

RobinCsl commented on Jul 20, 2019

Aiiros commented on Aug 19, 2019

50 remaining items

laurens-lamberts commented on Feb 12, 2025

react-native-bot commented on Aug 12, 2025

AlirezaHadjar commented on Aug 12, 2025

hazemelshaterr commented on Sep 16, 2025

shoxter commented on Sep 25, 2025

zhuminjunivan commented on Nov 4, 2025

Luong-Dev commented on Mar 27, 2026

react-native-bot commented on Sep 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions