Bottom type toast have massive gap with Keyboard
See original GitHub issueI 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
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
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.