Block property on button does not consistently work properly

[gremlin529]

Willing to submit a PR to fix?

• I am willing to submit a PR to fix

Requested priority

High

Products/applications affected

I'm trying to use "Block:{true}" on buttonv1 to get a full width button, as opposed to just using a style and it seems to extend off the screen in some cases, in this case we've got a bottom sheet container that the button is in:

anyone have thoughts on what's happening here?

Package version(s)

0.35.1

OS version(s)

No response

Platform

• iOS
• macOS
• win32
• windows
• android

Xcode version

No response

Please provide a reproduction of the bug

Just use foo is what I did above.

Actual behavior

Button goes off screen

Expected behavior

more like align-self:"stretch" which seems to work when I add it to the style

[thesharifi]

@Saadnajmi, please assign this to me.

[Saadnajmi]

@Saadnajmi, please assign this to me.

We don't really use the assign feature of GitHub issues much, but please feel free to go for it! :)

[gremlin529]

@Saadnajmi, please assign this to me.

Thank you thesharifi, I'd also like to understand if it's possible for this to work under android as currently it does not. If that isn't possible then I wonder if should just be worked around some other way globally.

[gremlin529]

@Saadnajmi, please assign this to me.

We don't really use the assign feature of GitHub issues much, but please feel free to go for it! :)

So I've done a bit more digging and I've found an interesting issue. If you want a FURN Button component to be the full width of the container on iOS and Android there's some more issues. Android doesn't support Block so you can set the button width to 100% and that works, and it works on iOS as well, but if you want the button to have say a left and right margin to the edges so you set margin:10, then you'll see on Android it works but on iOS it will compute the width of the button first, then move it over the 10 from the left, resulting in this behaviour of the button being off screen on the right.