CODEWITHSUNDEEP
android-edittextreact-nativescrollviewtextinputreact-native-scrollview
user2427293
user2427293

Reputation: 53

scrollview can't scroll when focus textinput react native

I have a TextInput inside a ScrollView.

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

Upvotes: 5

Views: 17301

Answers (6)

Meisam Sabaghi
Meisam Sabaghi

Reputation: 826

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

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

Upvotes: 1

Computer&#39;s Guy
Computer&#39;s Guy

Reputation: 5353

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

Upvotes: 1

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8635

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>

Upvotes: 10

Idan
Idan

Reputation: 4023

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

Upvotes: 0

Man
Man

Reputation: 772

In scrollView use keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

it solve your problem

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

Upvotes: 2

Eliza Elizel
Eliza Elizel

Reputation: 3

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

Upvotes: 0

Related Questions