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.

Do's#

<Button
_hover={{
_text: { color: 'secondary.400' },
}}
>
Change My Color
</Button>

Dont's#

<Button
_text={{
_hover: { color: 'secondary.400' },
}}
>
Change My Color
</Button>

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.

_disabled(100);
_pressed(70);
_hover(60);
_focus(50);
_focusVisible(55);
_active(30);
_checked(30);
_readOnly(40);
_invalid(40);
_web(10);
_android(10);
_ios(10);
_light(10);
_dark(10);