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.
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.