CODEWITHSUNDEEP
react-native
Lucky_girl
Lucky_girl

Reputation: 4863

Can't scroll inside ScrollView, when there are TextInputs

I have ScrollView inside that ScrollView, I have TextInputs, the scroll doesn't work in the area of TextInput. How to fix that? 

render () {
return (
<View>
    <ScrollView
    ref='keyboardScroll'
    keyboardShouldPersistTaps={true}
    >
    <View> 
    <TextInput 
    placeholder='First Name'
    />
    </View>
    <View> 
    <TextInput 
    placeholder='Last Name'
    />
    </View>
    <ScrollView>
</View>
)}

Here is the video with the issue.

Upvotes: 2

Views: 931

Answers (2)

tudor
tudor

Reputation: 508

I had the same problem on Android, where the placeholder was scrolling just a little bit up and down and preventing the ScrollView from scrolling. I managed to fix it by adding the following styles on the TextInput:

paddingTop: 0,
paddingBottom: 0,
paddingLeft: <whatever>,
paddingRight: <whatever>

Upvotes: 0

Lucky_girl
Lucky_girl

Reputation: 4863

I found the solution of that problem. The main problem was that text font size was too big for the TextInput field, which causes scroll inside the TextInput, so there are 2 solutions: 1) decrease font size 2) make the height of the TextInput field bigger. Also this solution solved another problem: Placeholders in TextInput are moving during the scroll

Upvotes: 1

Related Questions