[Bug]: Button Component Does Not Justify Content for Non-Text Elements

[georgewrmarshall]

Describe the bug

We've identified a limitation with the Button component where it fails to justify content properly when the content includes non-text elements, such as <ActivityIndicator /> alongside <Text />. This issue affects the layout and presentation of buttons that require a combination of text and other elements to convey their state or function effectively.

Example Code

<Button>
  <ActivityIndicator {...props} />
  <Text>{...}</Text>
</Button>

In the above example, the expected behavior would be for the Button component to justify both the ActivityIndicator and the Text elements correctly within its layout. However, the current implementation does not accommodate this, leading to layout issues.

Suggested Improvement

To address this issue, it would be beneficial to update the Button component's styling logic to ensure content is justified correctly, regardless of the element types it contains. This could involve revising the component's internal layout mechanism, potentially incorporating flexbox or other CSS techniques to achieve a more flexible and consistent presentation.

Expected behavior

No response

Screenshots/Recordings

Steps to reproduce

1. In the Button component add <ActivityIndicator /><Text>Redirecting to...</Text></>
2. Notice the misalignment of text and ActivityIndicator

Error messages or log output

No response

Version

7.15.0

Build type

None

Device

iPhone

Operating system

iOS

Additional context

This feedback is crucial for improving the usability and visual consistency of the Button component, especially in scenarios where indicating loading states or other dynamic content within a button is necessary. Addressing this issue will enhance the component's versatility and alignment with common UI patterns.

Severity

Sev 3

[georgewrmarshall]

@wachunei please add any additional information if needed

[Bullcoiner]

Hi There! Thank you for reporting this, it has been assigned to the appropriate team to be looked at.

[brianacnguyen]

@georgewrmarshall The button is currently justifying all the contents to center, as shown in the screenshot below