react-native-keyboard-aware-scroll-view
react-native-keyboard-aware-scroll-view copied to clipboard
Scrollview scrolls to top on TextInput unfocus
I am working with a long form which is wrapped in a KeyBoardAwareScrollView, with the following props:
<KeyboardAwareScrollView contentContainerStyle={{paddingBottom: Dimensions.get('window').height * 0.2}} showsVerticalScrollIndicator={false}>
It works as expected, however when the user focuses and unfocuses in any of the TextInputs, the ScrollView scrolls back to the top, and the user needs to manually scroll back to the position that they were at.
I am not sure if this is a bug, or if it is the expected behavior, but is there an option that will allow the scrollview to return to its previous position on unfocus? I can provide a gif of what is happening, or provide more of the code if needed.
facing same issue..
@rileyb94 try the below option
enableResetScrollToCoords={false}
This seems to be an issue with RN 0.56.0
Looks like adding enableResetScrollToCoords={false}
for the KeyboardAwareScrollView
worked for me! thanks @raghuureddy
setting enableResetScrollToCoords to false doesn't solve the problem, the content remains offset, is there any other way to resolve this?
Still no solution for this?
any resolution to this?!
Bueller?
any resolution to this?!
![Screen Shot 2019-12-05 at 17 52 10](https://user-images.githubusercontent.com/16864971/70229212-4fcc4680-1788-11ea-8d8b-01896f5f78ca.png)
adding enableResetScrollToCoords={false}
on <content>
instead of KeyboardAwareScrollView
solved the issue for me.
In my case enableResetScrollToCoords={false}
solved issue, but appeared new bug: when keyboard dismiss, it left an indent from the bottom equal to Keyboard height.
resetScrollToCoords={{y: 1000}}
(y
can be any value more than your scroll height) solved issue without keyboard indent after unfocus
In my case, viewIsInsideTabBar={true}
and enableAutomaticScroll={false}
solved this issue
My version react-native: 0.71.6 and react-native-keyboard-aware-scroll-view: 0.9.5 I resolved with both props:
enableAutomaticScroll={false} enableResetScrollToCoords={false}
@tranminhnhat1005 It makes the scroll to go to top, but when you click on the field it doesn't scroll to the field anymore, it just scroll when you progamatically send the focus to the next field.
This is the solution that I found:
<KeyboardAwareScrollView
enableAutomaticScroll={!isKeyboardVisible}
enableResetScrollToCoords={false}
onKeyboardDidShow={() => {
setKeyboardVisible(true);
if (timeoutRef) {
clearTimeout(timeoutRef)
}
}}
onKeyboardDidHide={() => {
timeoutRef.current = setTimeout(() => {
setKeyboardVisible(false)
}, 1000);
}}
extraScrollHeight={20}
>
Explaining the situation, when you disableAutomaticScroll, it makes it stop going to the top, which fix the issue, but it generates another issue where when you click in the field, it doesn't scroll anymore, so I started to control if the prop was true or false based in keyboard events, but when I change the focus of the input progammatically, even thought the keyboard always stay in the screen, it triggers the hide event, so what I did to fix that, I created a ref and I verify, if the status of the keyboard, change to hide, and really quick change to show again, then, doesn't change the state, canceling the setTimeOut!!
@rileyb94 try the below option
enableResetScrollToCoords={false}
This seems to be an issue with RN 0.56.0
It worked for me instantly!! Thanks!