Solid and outline buttons have different heights

[srmagura]

Description

Not sure if this is a bug or intentional. Solid and outline buttons currently differ slightly in height. This can be an annoyance if you want a row of buttons that all have the same height.

CodeSandbox/Snack link

https://snack.expo.dev/@srmagura/nativebase-outline-button-size-341

Steps to reproduce

1. Open the Snack I linked.

Expected behavior: Buttons have the same height regardless of variant.

Actual behavior: Outline buttons are slightly taller than solid buttons.

Screenshot from Android:

NativeBase Version

3.4.1

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

Web (visible in the web preview pane of the Snack)

Additional Information

You can probably fix this by adding a border to the solid buttons that is the same color as the background color.

As a reference point, the Bootstrap button component is the same height regardless of whether it is a normal (solid) button or an outline button.

[mayank-96]

Hello @srmagura, in the button outline variant we are using a border, as the button doesn't have a fixed height and width, instead has padding, due to which border appears to be shifted outside and the size appears to be increased. We'll surely find some hack or solution for this issue, but as it may take some time, till then you can try height and width for consistent size in all variants of button.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ruchik02]

For now, you can try this one link. And We'll surely find some hack or solution for this issue, thank you.