Version: 3.2.1

Pseudo Props Advanced

Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow.

Nesting pseudo props:#

In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind.

Example: So assume you want to change the text color of a button on its hover state.


_text: { color: 'secondary.400' },
Change My Color


_hover: { color: 'secondary.400' },
Change My Color

The above thing translates to a Text(not Button) when hovered changes its color to secondary.400 .

Precedence Order for Pseudo Props:#

Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence.