scrollview can't scroll when focus textinput react native

Question

I have a TextInput inside a ScrollView.

The scroll isn\'t working when the TextInput is on focus. This problem is only affecting Android.

Answer 1

I handle in different ways to each platform (in Ios focus to inputText is enough, don't forget to put this.scrollViewRef ref inside ScrollView that wrap inputText and put ref index the inputText

if (Platform.OS == 'android') {
    this.inputRefs[field].measure((w, h, px, py, xPage, yPage) => {
        this.scrollViewRef.scrollTo({ x: 0, y: yPage, animated: true })
        this.inputRefs[field].focus()
    })
} 
this.inputRefs[field].focus()

Answer 2

In scrollView use keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

it solve your problem

check docs here https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode

Answer 3

That is the expected behavior.

For more information Official TextInput documentation

You might want to try something like this: react-native-kayboard-aware-scroll-view

Answer 4

setting

<ScrollView keyboardShouldPersistTaps="always"

in combination with the textInput component below (custom component that i created for text inputs to solve this issue) solved my problem:

<TouchableOpacity
     activeOpacity={1}
     onPress={()=>this.input.focus()}>
     <View pointerEvents="none"
           <TextInput
              ref = {(input) => this.input = input}
           />
     </View>
</TouchableOpacity>

Answer 5

This is a very good example: http://blog.arjun.io/react-native/mobile/cross-platform/2016/04/01/handling-the-keyboard-in-react-native.html

The thing that was really important for me was to add:

android:windowSoftInputMode="adjustResize"

in AndroidManifest.xml in order to focus the textInput