react-nativereact-native-scrollview

TextInput prevents ScrollView from scrolling


I have a form that is longer than the phone's screen height. It is a ScrollView containing TextInput components. The problem is that when I want to drag starting the touch on a TextInput, the ScrollView doesn't move. If I drag starting on a blank space (the View in the code example), it scrolls perfectly.

It feels like the TextInput is somehow eating the touch/drag event, not allowing the ScrollView to interact.

The ScrollView looks similar to this:

function Form() {
    return (
        <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <View style={{ height: 150, }} />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
        </ScrollView>
    );
}

How can I make the scrolling work?

Update: I noticed that when I start scrolling on the blank space, I can then keep scrolling by touching the inputs. However, as soon as the inertia stops, I'm unable to scroll using the inputs again.


Solution

  • Ok, so looks like this is a bug in the 0.32 version of React Native library. Scrolling works as expected in 0.33. It was solved by this commit.