TextInput prevents ScrollView from scrolling

Question

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.

Answer 1

As quoted here:TextInput prevent scroll on ScrollView #25594 textAlign="center" causes this problem.

Adding multiline={true} with style={{textAlign: "center"}} resolve the problem.

Answer 2

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.

Answer 3

Faced the same issue. It turns out, this is only the case if TextInput component is given an implicit height style, which forces it to shrink down, and start capturing scroll events. I removed it and managed my TextInput size via fontSize and padding and it solved this issue for me.