Horizontal scrollview auto scroll if textInput text is long enough

Asked May 31 '18 at 07:33

Active May 31 '18 at 07:33

Viewed 857 times

I've create a tab application with a paging horizontal scroll view has 3 pages like this

<ScrollView
   showsHorizontalScrollIndicator={false}
   style={{ flex: 1 }}
   contentContainerStyle={{ height: '100%' }}
   pagingEnabled
   horizontal>
          <View style={{ width, backgroundColor: 'red' }}>
            <TextInput style={{ width, backgroundColor: '#FFF', height: 100 }} />
          </View>
          <View style={{ width, backgroundColor: 'green' }} />
          <View style={{ width, backgroundColor: 'blue' }} />
        </ScrollView>

As you can see, in the first tab, there's an TextInput, if you enter a long text (about ~50 characters), the scrollview auto scroll and break the UI (see image below) The issue only happen on low version Android (5.1, 4.4, 4.2), works well on high version and on iOS

asked May 31 '18 at 07:33

maphongba008

2,114
4
20
33

Hi there, I am also facing the same issue, please do let me know if you found a solution for this. Appreciated! – Avinash Kumar Gautam Jun 27 '18 at 12:25
It worked for me when i mark textinput as multiline={true} – Avinash Kumar Gautam Jun 27 '18 at 13:50
but I just want one line input text, can't find the solution :3 – maphongba008 Jun 27 '18 at 14:43
This is a known and reported an issue in react-native. I have gone through forums as well. For now, you will have to make multiline={true} and manage your self that it should not grow. – Avinash Kumar Gautam Aug 02 '18 at 08:11
@maphongba008: please let me know if you have the answer. It has been a year or more now but I am still facing the issue. react-native 0.61.5. Kinda sad – Luong Truong Dec 21 '19 at 04:30
1

@LuongTruong now I only support Android 6 and higher =)) – maphongba008 Dec 24 '19 at 04:35
@maphongba008: what a nice strategy! =)) – Luong Truong Dec 24 '19 at 06:27

Horizontal scrollview auto scroll if textInput text is long enough

0 Answers0