react-native-keyboard-aware-scroll-view icon indicating copy to clipboard operation
react-native-keyboard-aware-scroll-view copied to clipboard

Scrollview scrolls to top on TextInput unfocus

Open rileyb94 opened this issue 5 years ago • 15 comments

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.

rileyb94 avatar Sep 20 '18 13:09 rileyb94

facing same issue..

raghuureddy avatar Sep 24 '18 01:09 raghuureddy

@rileyb94 try the below option enableResetScrollToCoords={false}

This seems to be an issue with RN 0.56.0

raghuureddy avatar Sep 24 '18 02:09 raghuureddy

Looks like adding enableResetScrollToCoords={false} for the KeyboardAwareScrollView worked for me! thanks @raghuureddy

rileyb94 avatar Sep 24 '18 12:09 rileyb94

setting enableResetScrollToCoords to false doesn't solve the problem, the content remains offset, is there any other way to resolve this?

animaonline avatar Dec 10 '18 15:12 animaonline

Still no solution for this?

mtnptrsn avatar Mar 05 '19 13:03 mtnptrsn

any resolution to this?!

krisxcrash avatar Jul 23 '19 21:07 krisxcrash

Bueller?

BeKnowDo avatar Aug 22 '19 17:08 BeKnowDo

any resolution to this?!

SmirnovM91 avatar Sep 21 '19 15:09 SmirnovM91

Screen Shot 2019-12-05 at 17 52 10 enableResetScrollToCoords={false} work not well when input end of content.

Donhv avatar Dec 05 '19 10:12 Donhv

adding enableResetScrollToCoords={false} on <content> instead of KeyboardAwareScrollView solved the issue for me.

monicse09ku avatar May 01 '21 11:05 monicse09ku

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

Navipro70 avatar Aug 25 '21 10:08 Navipro70

In my case, viewIsInsideTabBar={true} and enableAutomaticScroll={false} solved this issue

quynhnvq avatar Nov 17 '22 09:11 quynhnvq

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 avatar May 06 '23 12:05 tranminhnhat1005

@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!!

LucasLFurini avatar Jun 14 '23 12:06 LucasLFurini

@rileyb94 try the below option enableResetScrollToCoords={false}

This seems to be an issue with RN 0.56.0

It worked for me instantly!! Thanks!

aritrainnofied avatar Nov 27 '23 12:11 aritrainnofied