react-native-keyboard-aware-scroll-view [iOS] Unwated scrolling to top when change focus between two horizontal inputs

Problem

Hello. I have a mysterious behavior with iOS when try to change focus between inputs by touch. Numeric keyboard has no 'next' button, also two inputs are inside horizontal layout. NumberInput it's just a forwardRef wrapper for Input in react-native-elements. Also tried with TextInput from react native.

Android works very well!

Play video with problem on imgur.com

Tries

played with all props combinations like keyboardShouldPersistTaps and keyboardDismissMode, enableAutomaticScroll and etc...
tried to disable automatic scroll and use it only in onFocus prop in TextInputs
ref from innerRef don't do anything (because scroll height doesn't changed)
tried change innerRef to ref. nothing changes.

??

Also on iOS it has 'delay' between focus and scroll to input...
It doesn't scroll automatically when I write text by hardware or iOS keyboards..

Source:

import React, { PureComponent } from 'react';

import { Platform } from 'react-native';
import { StyleSheet } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import { CardHorizontalContent, CardElement } from '@js/components/Card';
import { Button } from '@app/theme/components';
import { Typography } from '@app/theme/components/Typography';
import { LayoutHorizontalItems } from '@app/theme/components/Layout';
import { NumberInput } from '@app/theme/components/TextInput';

import { RulesViewDescription, RulesViewFooter } from '@app/apps/Rules/components';

const styles = StyleSheet.create({
    root: {
        flexGrow: 1,
        paddingTop: 16,
        paddingHorizontal: 24,
    },
    inputsContainer: {
        paddingHorizontal: 0,
        marginHorizontal: -4,
    },
    offset: {
        marginBottom: 16,
    }
});

export class SetVoltageRuleStep extends PureComponent<never> {

    renderTextInputs() {

        return (
            <LayoutHorizontalItems gutter={4} style={styles.inputsContainer}>
                <NumberInput
                    metricName="V"
                    placeholder="Min Voltage"
                    style={{ height: 56 }}
                />
                <NumberInput
                    metricName="V"
                    placeholder="Max Voltage"
                    style={{ height: 56 }}
                />
            </LayoutHorizontalItems>
        )
    }

    renderDescription() {
        const changeOf = 'Process Long Title Name';
        const changeTo = 'Other Device First';

        return (
            <RulesViewDescription>
                Defines battery voltage which will trigger the change of
                <Typography variant="subheading"> {changeOf} </Typography>
                to <Typography variant="subheading">{changeTo}</Typography>.
            </RulesViewDescription>
        );
    }

    render() {

        const extraScrollHeight = Platform.OS === 'ios' ? 48 : 0;

        return (
            <>
                <KeyboardAwareScrollView
                    style={styles.root}
                    extraScrollHeight={extraScrollHeight}
                    showsVerticalScrollIndicator={false}
                    bounces={false}
                    overScrollMode="never"
                    enableOnAndroid

                    // I've tryed all of values...
                    keyboardShouldPersistTaps="handled"
                >
                    {this.renderDescription()}
                    <CardElement>
                        <CardHorizontalContent
                            title="Simple"
                            subTitle={(
                                <Typography variant="subheading" gray>...</Typography>
                            )}
                        />
                    </CardElement>
                    {this.renderTextInputs()}
                </KeyboardAwareScrollView >
                <RulesViewFooter>
                    <Button title="Skip" type="filled" />
                    <Button title="Next" type="filledColor" />
                </RulesViewFooter>
            </>
        );
    }
}

??

iOS 10.3.1
react-native "0.61.5"
react-native-keyboard-aware-scroll-view "0.9.1"

also iOS 13.3 the same

Apr 23 '20 10:04 zmnv

Same here, please fix this.

Jun 10 '20 05:06 jp928

Same here, please fix this.

Jun 10 '20 17:06 Pat-Gekoski

Try enableResetScrollToCoords={false} ?

Jun 20 '20 06:06 icony36

avoiding-view-scroll-bug

I have a similar issue like this, @icony36 solution did not work for me, see the gif, it was recorded with the prop enableResetScrollToCoords set to false

any ideas? I'm out of them :(

ps. sorry about the low fps gif, i used something online to convert my mov..

Sep 09 '20 08:09 lucasreppewelander

@lucasreppewelander same issue, any update ??

Sep 10 '20 07:09 minh-dai

@lucasreppewelander @minh-dai Similar issue here. Any update, guys?

Sep 13 '20 21:09 educbraga

https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/418#issuecomment-617474009

I managed to solve it by setting keyboardOpeningTime={Number.MAX_SAFE_INTEGER}, but it's just a workaround.

I think these issues are related based on my personal issue, and this patched worked for my needs.

Sep 28 '20 21:09 AlanLeePhilly

@AlanLeePhilly Pfff, one thousands thanks for the reference.

Mar 31 '21 20:03 diosney

I have similar issue like @lucasreppewelander, solution @icony36 didn't work for me, solution @AlanLeePhilly didn't work for me as well.

Simulator Screen Recording - iPhone 12 - 2021-11-22 at 12 22 03

Any ideas? I tried everything.. :/

Nov 22 '21 11:11 srymarz

In my case, I noticed that there is a Keyboard listener to set height for iOS in KeyboardAwareHOC.js Screen Shot 2022-05-20 at 09 12 10 So I just add another listener in my Screen to get the Keyboard height and add it to extraScrollHeight

The code is like below:

class ExampleScreen extends Component {
  constructor(props: any) {
      super(props);
      this.state = {
          keyboardHeight: 0,
      }

      
      this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }
    
  componentWillUnmount () {
      this.keyboardDidShowListener.remove();
      this.keyboardDidHideListener.remove();
  }
    
  _keyboardDidShow () {
      this.setState({
            keyboardHeight: e.endCoordinates.height
      })
  }
    
  _keyboardDidHide () {
      this.setState({
            keyboardHeight: 0
      })
  }

  renderContent() {
     ....
  }
    
  render() {
    return (
      KeyboardAwareScrollView
                contentContainerStyle={{ flexGrow: 1, }}
                showsVerticalScrollIndicator={true}
                indicatorStyle={'white'}
                enableOnAndroid={true}
                enableAutomaticScroll={true}
                keyboardShouldPersistTaps='handled'
                extraScrollHeight={ isIOS? this.state.keyboardHeight: 0}
            >
                {this.renderContent()}

            </KeyboardAwareScrollView>
    );
  }
}

May 20 '22 02:05 bdtren

Above solutions didnt work me. What worked was extraHeight prop. extraHeight={150} I had to play around with value to make it work. For instance, 100 didn't work but 150 did.

Feb 06 '23 08:02 bibekgurunguh

Above solutions didnt work me. What worked was extraHeight prop. extraHeight={150} I had to play around with value to make it work. For instance, 100 didn't work but 150 did.

extraHeight={150} not work but extraHeight={0} works for me