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.

As quoted here:TextInput prevent scroll on ScrollView #25594 textAlign="center" causes this problem. — JsHitachi, May 21 '21 at 15:58

score 1 · Accepted Answer · answered Jan 31 '17 at 14:54

1

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.

answered Jan 31 '17 at 14:54

Jan Kalfus

5,422
2
30
38

5

Have the same problem in 0.39.2. – Lucky_girl Oct 09 '17 at 09:35
Try upgrading to the latest version if you can. You're ten versions behind :/ – Jan Kalfus Oct 09 '17 at 10:17
it's still not working , there is a visible sroll in textInput itself – kumar kundan Nov 19 '18 at 11:07

score 1 · Answer 2 · answered May 12 '19 at 15:54

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.

score 0 · Answer 3 · edited May 23 '17 at 10:29

Update: this might help - scrollview can't scroll when focus textinput react native

Could it be the missing <View style={{ flex: 1 }}> wrapping around the <ScrollView> ?

I tried this and it scrolls fine from both the inner View and the TextInput components:

 render() {
    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={{ flex: 1 }} >
                <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} />
                <TextInput placeholder="this is a textinput with height 1200" style={{ borderColor: 'brown', borderWidth: 1, height: 1200 }} />
                <View style={{ height: 150, backgroundColor: 'khaki' }} />
                <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} />
            </ScrollView>
        </View>
    );
}

But since you're saying that it scrolls when dragging from the View component, maybe sharing the entire code might reveal something

Thanks, but adding the `View` did not help. – Jan Kalfus Jan 20 '17 at 07:56 — Jan Kalfus, Jan 20 '17 at 07:56

score 0 · Answer 4 · answered Aug 29 '20 at 09:13

Though this is an old question, I've faced the same problem and found no public workaround.

In my case the reason was in TextInput height style property not been set explicitly. Without it (or with flex: 1 set, nevermind) the actual height of the input field can be slightly less then the height of it's text, forcing the text to scroll vertically (even though multiline style is false, scrollEnabled is false, etc.).

So, my solution is to explicitly set the minimal height value that will let the whole text to fit.

score 0 · Answer 5 · edited May 22 '21 at 01:05

0

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

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

edited May 22 '21 at 01:05

4b0

21,981
30
95
142

answered May 21 '21 at 15:58

JsHitachi

69
3
8

But I don't want to center align it – Stefan Feb 15 '23 at 08:54

TextInput prevents ScrollView from scrolling

5 Answers5