Bottom type toast have massive gap with Keyboard

[giovankabisano]

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

[calintamas]

Hi @giovankabisano, this looks like a bug. Thanks for raising the issue, I'll take a look as soon as I can

[calintamas]

@giovankabisano published a fix in v1.4.9

[giovankabisano]

Cool! Thanks man, I'll try to upgrade my library version

[anisfrontmen]

@calintamas based on your fix commit , you have removed the keyboard listener for Android, that lead to another issue when the keyboard is open, the Toast stay behind the keyboard in Android.

[calintamas]

@anisfrontmen is your android:windowSoftInputMode set to adjustResize?

[anisfrontmen]

no it is set as adjustPan for other reasons, I do understand that it works when you change it to adjustResize, but it will be good to not rely on the windowSoftInputMode so KeyboardAvoidView will be the optimal solution.

second solution : there is way to set the windowSoftInputMode programatically but then I need to have a global functions onShow and onHide. so that I can adjust it myself.

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

Screen.Recording.2021-03-29.at.14.06.14.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.

[tearjuIce]

@puuuudding you have any workaround for this? im facing this too

[puuuudding]

@cutenesss unfortunately nothing right now

[44sisi]

I'm facing the same issue on IOS. When I focus on the input and the keyboard opens for the first time, the toast appears at the desired location. However, after dismissing the keyboard once, thereafter when keyboard is open again, there is a large gap between toast and keyboard and the bottomOffset param doesn't work anymore.

[44sisi]

Found workaround using keyboardOffset option for IOS

[finnmerlett]

This really needs a configuration option to switch on and off, since if you have pan-avoiding-view switched off in your android app, you need that keyboard avoiding behaviour implemented by this package...