Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
matheuscouto opened this issue Nov 3, 2022 · 5 comments

Comments

@matheuscouto
Copy link

matheuscouto commented Nov 3, 2022

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

@matheuscouto
Copy link
Author

matheuscouto commented Nov 3, 2022

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

@alexyca
Copy link

alexyca commented May 19, 2023

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

@alainib
Copy link

alainib commented May 30, 2023

@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

@alexyca
Copy link

alexyca commented May 30, 2023

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

@manjeetcars24
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants