Bottom type toast have massive gap with Keyboard

I have a simple Login use case inside my app and I want to use your Toast library within this project. My designer have a design system for our app that requires Toast to show on the bottom of the screen.

This library able to show Bottom Toast flawlessly with no keyboard show-up

But when the keyboard still showing on the screen, then the bottom toast leaves a gap above the keyboard.

My expectation is to show Bottom Toast above the keyboard without having that much gap. See last image inside What have I tried session, that’s the expectation on what should happened according to the designer, but I assume that the workaround just hackish (?)

Implementation

App.js

export default function App() {
  ...

  return (
    <ApolloProvider client={defaultApolloClient}>
      <StateMachineProvider>
        <PaperProvider theme={theme}>
          <Routes />
          <Toast position="bottom" ref={(ref) => Toast.setRef(ref)} />
        </PaperProvider>
      </StateMachineProvider>
    </ApolloProvider>
  };
}

Login.js

import Toast from "react-native-toast-message";

function index(){
   ...
   Toast.show({
       text1: 'Wrong username or password',
       type: "error"
    })
   ...
}

Version

• React Native: 0.63.3
• Emulator: Pixel 3a, API 29

What have I tried?

• I try using real device (Samsung J6) but the problem still exists.
• I add keyboardOffset={-250} to decrease the gap between toast and keyboard, but that’s not a viable option because different phone have different keyboard size.

Are there anything that I miss in the configuration to solve this problem? Any help will be appreciated

[puuuudding]

@calintamas hi, I also have encountered this issue. After install the latest version, this problem is solved on Android, but it still exists on iOS, do you have a plan to check this? Thank you!

After press enter, the keyboard will be dismissed and toast will show if request failed. Also if I press the input field to show the keyboard before toast message goes hidden, there is a high chance the toast is stuck and can’t hide automatically.

https://user-images.githubusercontent.com/8097548/112793657-3c896c80-9098-11eb-9632-44d8a47caeae.mov

[goleary]

I’ve seen the same on iOS where the toast shows above where the keyboard was even if the toast is shown after Keyboard.hide() has been called.

If I use setTimeout(showToast, 1000) the toast shows in the desired location, but that is quite the delay.