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

After focusing field, weird second scroll adjustments (video showing)

Open matheuscouto opened this issue 1 year ago • 5 comments

I'm having this weird "second adjustment" delayed behavior, my keyboardOpeningTime is set to 0.

matheuscouto avatar Nov 03 '22 15:11 matheuscouto

Btw I just managed to avoid this "second adjustment" disabling the scroll if keyboard is opened. Not ideal but for my case doesn't matter, but still something should be addressed

matheuscouto avatar Nov 03 '22 15:11 matheuscouto

@matheuscouto nice trick, I made a custom component that implements this and it works like a charm :

const MKeyboardScrollView = (props: MKeyboardScrollViewProps) => {
  // States
  const [keyboardOpen, setKeyboardOpen] = React.useState(false);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  const keyboardDidShow = () => {
    console.log('Keyboard Shown');
    setKeyboardOpen(true);
  };

  const keyboardDidHide = () => {
    console.log('Keyboard Hidden');
    setKeyboardOpen(false);
  };

  function dismissKeyboard() {
    if (Platform.OS != 'web') {
      Keyboard.dismiss();
    }
  }

  return (
    <KeyboardAwareScrollView
      extraScrollHeight={Platform.OS === 'ios' ? 20 : 0}
      enableResetScrollToCoords={true}
      enableAutomaticScroll={!keyboardOpen}
      bounces={false}>
      <ScrollView style={{ flexGrow: 1 }}>
        <TouchableWithoutFeedback onPress={dismissKeyboard}>
          {props.children}
        </TouchableWithoutFeedback>
      </ScrollView>
    </KeyboardAwareScrollView>
  );
};

alexyca avatar May 19 '23 14:05 alexyca

@alexyca hello, i'm trying your solution. On IOS i have a weirds effect on keyboard, it's close and open when i click next (in keyboard pan) between two inputs

Simulator Screen Recording - iPhone 14 - 2023-05-30 at 15 18 43

i use exact same code you posted.

Did you have this behavior or a fix please ? thanks

alainib avatar May 30 '23 13:05 alainib

@alexyca hello, i'm trying your solution. On IOS i have a weirds effect on keyboard, it's close and open when i click next (in keyboard pan) between two inputs

Simulator Screen Recording - iPhone 14 - 2023-05-30 at 15 18 43

i use exact same code you posted.

Did you have this behavior or a fix please ? thanks

I never used "next" button before 😅 !

However, you could add a "trick" from my script by upgrading dismisskeyboard function by checking the type of event that trigger the function, you may be able to differenciate physical touch event and next button event on keyboard ?

alexyca avatar May 30 '23 13:05 alexyca

@alexyca use autoFocus ={true} on every field u can set it to true on next press of previous field

manjeetcars24 avatar Jul 04 '23 12:07 manjeetcars24