Can't make the toast message uses the whole screen width

[sdumjahn]

Describe 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:

1. Add the Toast component to your app and add a custom success component based on the BaseToast component.
2. Add a custom style to make the width to 100%
3. Open the toast message
4. 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

[calintamas]

Hi @sdumjahn, try using the Dimensions API

[jstheoriginal]

yeah this one threw me for a loop when upgrading. It's probably worth mentioning in the docs that flexbox doesn't work for automatically setting width/height dimensions.

[sdumjahn]

@calintamas: Thanks for this advice. I found this workaround a few minutes after I created the thread, but I think that this is a bad solution and I would preferrer to have a solution based on flexbox.

When this is not possible, I think it should be good to mention this workaround in the docs.

[calintamas]

I'll have to check though, maybe it could be supported. I think it's the container style which breaks it

[damian-balas]

I'll have to check though, maybe it could be supported. I think it's the container style which breaks it

Yes, you probably shouldn't center the content. I want to show it on the right side.
I Had to do a margin: 20% and max width 80% trick.
That's OK for now... but I'd like to have the possibility to change the root container styles anyway :)

[calintamas]

Fixed in v2.1.0.

It should be possible to have a full width Toast via:

<BaseToast style={{ width: '100%' }} />

Or change its alignment:

<BaseToast style={{ alignSelf: 'flex-end' }} />

[damian-balas]

Fixed in v2.1.0.

It should be possible to have a full width Toast via:

<BaseToast style={{ width: '100%' }} />

Or change its alignment:

<BaseToast style={{ alignSelf: 'flex-end' }} />

@calintamas Sadly only the child element is 80% and aligned to the right.
The issue is that I have a button behind the toast that I want to click.

I cannot click the back button. It would be perfect if I could change the styles of the parent as I mentioned in my previous comment :) Thanks!

[calintamas]

@damian-balas Hi, I'll have to think more deeply about it.

Ideally, the container styles are provided by the lib and there would be no need to change them. I want to avoid possible layout issues occuring due to not having the complete mental model of how it works and making wrong assumptions when changing the styles.

The main objective is to keep a nice DX in general, while also trying to support as many use cases as I can.

[calintamas]

The issue is that I have a button behind the toast that I want to click.

@damian-balas Fixed in v2.1.1, taps behind the Toast should be possible now :)