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.

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. — Craig Wilkinson, Nov 28 '17 at 17:53

Mahdieh Shavandi · Accepted Answer · 2020-08-20T12:27:22.383

10

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>

edited Aug 20 '20 at 12:27

answered Mar 03 '19 at 12:19

Mahdieh Shavandi

4,906
32
41

2

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. – David Jones Sep 21 '19 at 20:03
@DavidJones exactly, That's the problem. Have you found any solution to that? – Mahdieh Shavandi Sep 22 '19 at 12:32
1

(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 https://github.com/facebook/react-native/issues/25594 and https://github.com/facebook/react-native/issues/25594). The only workaround I know of is to set `multiline={true}`. – David Jones Sep 23 '19 at 17:42
Could you take a look at this please? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:42
@Jnl I provided a solution for you. take a look and let me know if your problem is solved – Mahdieh Shavandi Aug 20 '20 at 13:50

score 2 · Answer 2 · answered Mar 08 '18 at 10:47

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

answered Mar 08 '18 at 10:47

Man

742
1
6
23

Unfortunately, this doesn't solve the problem on Android. – David Jones Sep 21 '19 at 20:04
Could you take a look at this please? https://stackoverflow.com/questions/63437251/unable-to-scroll-in-scrollview – Aug 19 '20 at 16:42

score 1 · Answer 3 · edited Nov 19 '20 at 12:27

1

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

edited Nov 19 '20 at 12:27

Amin Dannak

155
1
7

answered Sep 28 '16 at 11:50

Computer's Guy

5,122
8
54
74

score 1 · Answer 4 · answered Oct 16 '21 at 10:45

1

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

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

answered Oct 16 '21 at 10:45

Meisan Saba

800
2
9
25

score 0 · Answer 5 · answered Nov 18 '16 at 14:17

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

score 0 · Answer 6 · answered Nov 27 '19 at 10:05

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

scrollview can't scroll when focus textinput react native

6 Answers6

Linked