[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]

#418 (comment)

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.

[srymarz]

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

Any ideas? I tried everything.. :/

[bdtren]

In my case,
I noticed that there is a Keyboard listener to set height for iOS in KeyboardAwareHOC.js

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>
    );
  }
}

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

[ryskin]

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

[thisisadithk]

keyboardOpeningTime={Number.MAX_SAFE_INTEGER}

This fixed it for me :')

[AnhTP-Corize]

keyboardOpeningTime={Number.MAX_SAFE_INTEGER}

This fixed it for me :')

It's working well to me👍

[Polad10]

same issue here