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.

Lannie

Still happening in react-native: 0.47.2 – Ensepulcher

Still happening in react-native: 0.60 – Mcvay

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

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

Lannie

Have the same problem in 0.39.2. – Stimulant

Try upgrading to the latest version if you can. You're ten versions behind :/ – Lannie

it's still not working , there is a visible sroll in textInput itself – Sind

Answer 2

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.

Wilfredowilfrid

Answer 3

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

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

Tabernacle

But I don't want to center align it – Transportation

Answer 4

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

Vitta

Thanks, but adding the View did not help. – Lannie

Answer 5

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.

Jollanta

Answer 6

import ScrollView and TextInput from 'react-native' not from 'react-native-gesture-handler'

Aalesund