Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput prevent scroll on ScrollView

See original GitHub issue

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 https://github.com/facebook/react-native/issues/15962 which has not yet been answered.

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

Issue Analytics

State:
Created 4 years ago
Reactions:14
Comments:42

Top GitHub Comments

19reactions

hosseinmdcommented, Jul 1, 2020

<TextInput
      multiline={true}
      numberOfLines={1}
    />

Set multiline=true and limit the numberOfLines can solve this problem temporarily

14reactions

daveyjonescommented, Dec 23, 2019

Don’t close this issue. It’s a major one and definitely deserves attention.

Top Results From Across the Web

react native - TextInput prevents ScrollView from scrolling

Ok, so looks like this is a bug in the 0.32 version of React Native library. Scrolling works as expected in 0.33.

TextInput · React Native

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, ...

Today's React Native Tip: Keyboard issues in ScrollView

Another common issue I have run into is the keyboard would be up while scrolling through a page, unless we tap outside the...

ScrollView - React Native

scrollToEnd(([options]: {animated: boolean}));. If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView ...

react-native-keyboard-aware-scroll-view - npm

react-native-keyboard-aware-scroll-view ... A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput ...