question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bottom type toast have massive gap with Keyboard

See original GitHub issue

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 image

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

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

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
puuuuddingcommented, Mar 29, 2021

@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

1reaction
golearycommented, Jul 26, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Toaster: other toasts fill gap in the wrong direction ... - GitHub
[core] fix(Toast): bottom toasts exit in the correct direction (palan… … ... Successfully merging a pull request may close this issue. [core] ...
Read more >
Why is there a huge gap between the keyboard and bottom of ...
remember the one ui atop has a large gap on its ui on main screen and ... I have a hard time typing...
Read more >
To remove the gap between keyboard and bottom ... - YouTube
To remove the gap between keyboard and bottom of the screen on the Galaxy Note 10, follow these steps:1. Go to Settings -...
Read more >
Roland DP-603 Gaps between keys - help! - Piano Forums
If the answer is yes (I suspect it will be), the keys with larger gaps are probably only due to the way the...
Read more >
Keyboard.Row - Android Developers
android:verticalGap, Default vertical gap between rows of keys. ... bottom, 8, Row is anchored to the bottom of the keyboard.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found