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.

Gasperoni

Did you manage to solve this problem? – Hazlett

I had a problem with this and it turned out that it was because I was specifying a height in the styles for the TextInput, but the contents of the TextInput were exceeding that height in Android but not iOS (because the system fonts were overriding my font styles). In case anyone else comes across this it can be fixed by removing the hard coded height or increasing it to ensure that it can contain the content without overflow. – Hazlett

Answer 1

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>

Jollanta

Warning: this method effectively disables text selection, so users are not able to copy/paste or place the cursor in the middle of the text. – Monotone

@DavidJones exactly, That's the problem. Have you found any solution to that? – Jollanta

(Sorry, it won't let me @ mention your username, so hopefully you see this.) In my case this was being caused by the alignment of the input text—the issue appears when the text is center-aligned or right-aligned. This is a known bug: (see github.com/facebook/react-native/issues/25594 and github.com/facebook/react-native/issues/25594). The only workaround I know of is to set multiline={true}. – Monotone

Could you take a look at this please? #63437751 – Richthofen

@Jnl I provided a solution for you. take a look and let me know if your problem is solved – Jollanta

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

Chestnut

Unfortunately, this doesn't solve the problem on Android. – Monotone

Could you take a look at this please? #63437751 – Richthofen

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

Icj

Answer 4

i use simple trick for TextInput and that work for me correctly .Should add this prop in TextInput :

<TextInput
      multiline={true}
      numberOfLines={1}
 />

Santoro

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

Hughie

Answer 6

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()

Spancake