Skip to content

Button flex problem on iOS #3652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
szado opened this issue Feb 5, 2023 · 2 comments
Closed

Button flex problem on iOS #3652

szado opened this issue Feb 5, 2023 · 2 comments

Comments

@szado
Copy link

szado commented Feb 5, 2023

Current behaviour

There is a problem with buttons with flex: 1 on iOS - buttons are not visible.

Expected behaviour

Buttons should have proper width and be visible like on Android or web.

How to reproduce?

https://snack.expo.dev/@szado/rnp-ios-button-problem?platform=ios
but1 should occupy the entire available width instead it is invisible.

Preview

IOS:
obraz
Expected behaviour:
obraz

Your Environment

software version
ios x
android x
react-native newest
react-native-paper newest
expo sdk newest
@durandt
Copy link

durandt commented May 15, 2025

I am encountering a very similar issue with v5.14.1 which i suspect was caused by #4634
My Button is not showing on iOS in a flex layout as below:

<View
    style={{
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'center',
        marginVertical: 8,
        marginHorizontal: 16
    }}
>
    <Button mode="contained-tonal" style={{ flex: 1 }}>
        Test
    </Button>
</View>

But will show as soon as I set a height to the button style:

<View
    style={{
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'center',
        marginVertical: 8,
        marginHorizontal: 16
    }}
>
    <Button mode="contained-tonal" style={{ flex: 1, height: 40 }}>
        Test
    </Button>
</View>

This is working fine in 5.14.0

I use this layout to create a button that stretches to the whole parent width. Any other suggestion on how to achieve that would be appreciated.

@lukewalczak
Copy link
Member

I will take a look at that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants