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

[zmnv]

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

1. played with all props combinations like keyboardShouldPersistTaps and keyboardDismissMode, enableAutomaticScroll and etc...
2. tried to disable automatic scroll and use it only in onFocus prop in TextInputs
3. ref from innerRef don't do anything (because scroll height doesn't changed)
4. 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

[jp928]

Same here, please fix this.

[Pat-Gekoski]

Same here, please fix this.

[icony36]

Try enableResetScrollToCoords={false} ?

[lucasreppewelander]

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..

[minh-dai]

@lucasreppewelander same issue, any update ??

[educbraga]

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

[AlanLeePhilly]

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.

[diosney]

@AlanLeePhilly Pfff, one thousands thanks for the reference.