Can't make the toast message uses the whole screen width
See original GitHub issueDescribe the bug In previous versions I could set the width of the toast message to 100% and the messages uses the whole screen width. Since the version 2 this does not work anymore.
Steps to reproduce Steps to reproduce the behavior:
- Add the Toast component to your app and add a custom success component based on the
BaseToast
component. - Add a custom style to make the width to 100%
- Open the toast message
- The message is very small and not readable (see screenshot)
Expected behavior The message should be use the whole size of the screen without any free space left or right.
Screenshots
Code sample
<Toast
config={{
success: (props) => (<BaseToast {...props} style={{ width: '100%' }} />)
}}
/>
The sizing only works when using explicit width like width: 200
.
Environment (please complete the following information):
- OS: iOS
- react-native-toast-message version: v2.0.2
- react-native version v0.66.3
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (6 by maintainers)
Top Results From Across the Web
How to make custom toast message to take the whole screen
Look at this line toast.setGravity(Gravity.FILL,0,0) , it makes the toast fill the whole screen just as you want. It is what I use...
Read more >Full width toast don't work in bootstrap 4.3.1 #611 - GitHub
I update the bootstrap to the new version and I saw the "positionClass": "toast-top-full-width" don't work at the bootstraps upper than 4.2.x.
Read more >Toasts overview - Android Developers
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message...
Read more >Toasts - Bootstrap
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic ...
Read more >Toast - PrimeNG - PrimeFaces
In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px. <p-toast [breakpoints]="{'920px': ...
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
Fixed in
v2.1.0
.It should be possible to have a full width Toast via:
Or change its alignment:
I’ll have to check though, maybe it could be supported. I think it’s the container style which breaks it