Weird Scroll when change text event fires on android 9 and 10

[taha200]

I started to use this library because it has great feature to avail and maintain time to time, I encountered the issue that I am experiencing the weird scroll whenever I write a text in my text input and it is happening on the android OS 9 and 10

<KeyboardAwareScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: 'white' }} keyboardShouldPersistTaps={Platform.OS === 'ios' ? 'never' : 'always'} bounces={false} > <TextInput /> </KeyboardAwareScrollView>

Video Link:
https://wetransfer.com/downloads/2143ff1a64e1667cdb40042ba656fd4a20240312101324/dbc0bc

[kirillzyusko]

Hey @taha200

Can you provide more information please, especially:

• what are device manufacture? Can you give full spec like "Xiaomi Redmi Note 5 Pro Android 9"?
• what is the library version?
• can you paste here a minimal reproduction demo?
• is the problem reproducible in emulator?
• does the problem happens on Android 11+?

Most likely problem happens here - https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/components/KeyboardAwareScrollView/index.tsx#L197

You can try to comment out this line and see how it behaves. However for me it looks like there is a problem with memoization and it reads old layout from TextInput 👀

[taha200]

1. Samsung Galaxy A01
2. library version 1.10.2
3. Just fire a text event and this issue is happening https://wetransfer.com/downloads/2143ff1a64e1667cdb40042ba656fd4a20240312101324/dbc0bc
   I paste the link here for demo
4. yes
5. no

[taha200]

I commented out the line and nothing happens, issue still persists. @kirillzyusko

[kirillzyusko]

@taha200 I can not reproduce this problem in example app (I've tested app on Pixel 6 Pro, API 28):

Screen.Recording.2024-03-12.at.20.07.54.mov

Can you provide a minimal reproduction example, please?

[taha200]

Let me know the library version please?

[taha200]

I checked the same simulator and not getting this issue, but can you check on the physical device?

[kirillzyusko]

Let me know the library version please?

This is example app from main branch (version 1.11.3).

I checked the same simulator and not getting this issue, but can you check on the physical device?

I tested on a physical Xiaomi Redmi Note 5 Pro (Android 9) and Pixel 7 Pro (Android 14) and the issue is not reproducible. You've said it's reproducible on emulator - can you give me your emulator configuration?

[taha200]

I think I should upgrade the library version, I will check it and let you know
My bad I had mistakenly wrote yes for the emulator.

[taha200]

This issue is still persist in new version, can you help me out please?

[taha200]

I think the onchangetext with usememo as you stated earlier is making the problems, I am getting the problem in 9 and 10 all devices. @kirillzyusko

[taha200]

I used text input from react native paper

[kirillzyusko]

@taha200 I'd like to help you, but without a proper reproduction example I can't. Please, provide minimal reproduction example and ideally the problem should be reproducible in environment that we both can have (i. e. Android Studio/Genymotion emulator - I can try to run example in device farm, but minimal available version there is Android 11).

You can also try to debug this problem yourself. Two suspicious things are:

• usage of onChangeText here https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/components/KeyboardAwareScrollView/index.tsx#L209 (though my debounce will react on first event and ignore subsequent, but on your video I see that it runs additional scrolling after several letters being typed)
• usage of useSmoothKeyboardHandler because it has its own interpolation on Android < 11 and doesn't listen to all keyboard events on these OS versions https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/components/KeyboardAwareScrollView/index.tsx#L214 (maybe Samsung devices dispatche onStart every time when you type a symbol? In this case potential scrolling is possible. because I run a lot of code that responsible for scrolling)

If you want to debug, then first of all I'd recommend you to understand which code calls maybeScroll function when you are typing. And when you'll have this information we can proceed with a potential fix (i. e. at least we'll know on which level it should be fixed - native or JS code).

P. S. do you use react-native-avoid-softinput? I remember it could produce some conflicts and cause unnecessary scrolling.

[kirillzyusko]

Posting for better visibility - tried to find Samsung A01 on AWS device farm but didn't find it there 😔

@taha200 do you use Samsung A10 or Samsung A01?