Broken button child width on Android

[zvonimirr]

Current behaviour

I have a button with a child that is a View with the following style.

{
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
}

On iOS it works without any issues, however on Android it seems to be having a bit of trouble.

Expected behaviour

I expect both platform to honor the width: "100%", and fill the entire button.

How to reproduce?

<Button>
  <View style={{
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  }}>
    <Icon1 />
    <Text>
      View All Transactions
    </Text>
    <Icon2 />
  </View>
</Button>

Preview

Added the extra background color for clarity.

What have you tried so far?

I tried experimenting with onLayout prop, but in the end just ended up hardcoding the padding on the Text element inside the View.

Your Environment

software	version
ios	17.0.1
android	13
react-native	0.73.4
react-native-paper	5.12.3
node	20.5.0
npm or yarn	10.2.5
expo sdk	50.0.7

[lukewalczak]

Tested on the latest version - 5.13.4, didn't spot the issue:

ios	android