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 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: Let us assume you want to change the text color of a button on its hover state.
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.
return(// Here you can see _hover will be overrided by _pressed
Press and Hover here
There are different ways in which you can add start and end icon in button.
In below approach icon is passed as startIcon prop and it’s styling is added into _icon pseudo prop.
The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in _icon, then styling passed in _icon will not be applied because the props passed in Icon should have higher specificity than _icon and that will prevent Icon to override props from _icon.
In below case color from _icon will not be applied to Icon and you will not be able to change the color of Icon on state changes like hover, pressed and focus.