Pseudo props | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Resources
Disclosure
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
Pseudo props
NativeBase provides a declarative way to add interaction or platform specific props.
Hover
Using _hover pseudo prop, we can customize the style of Pressable component on hover.
Hover over me
Copy<Pressable_hover={{ bg: 'primary.400' }}bg="primary.500"py={2}px={3}rounded="md"alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Hover me</Text></Pressable>
Pressed
Using _pressed pseudo prop, we can customize the style of Pressable component on pressed.
Press me
Copy<Pressable_pressed={{ bg: 'primary.700' }}bg="primary.500"py={2}rounded="md"px={3}alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Hover over me</Text></Pressable>
Focus
Using _focus pseudo prop, we can customize the style of Pressable component on focus.
Try focusing me
Copy<Pressable_focus={{ bg: 'secondary.500' }}bg="primary.500"rounded="md"py={2}px={3}alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Hover over me</Text></Pressable>
Platform specific styling
Using _web, _iOS, _android pseudo props, we can customize the style or behaviour of NativeBase components across platforms.
Primary
Web
Primary
Android
Primary
iOS
Copy<HStack space={4} justifyContent="center" alignItems="center"><VStack alignItems="center" space={2}><Box_web={{ bg: 'cyan.500' }}rounded="md"py={2}px={3}alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Primary</Text></Box><Text color="white">Web</Text></VStack><VStack alignItems="center" space={2}><Box_android={{ bg: 'fuchsia.500' }}rounded="md"py={2}px={3}alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Primary</Text></Box><Text color="white">Android</Text></VStack><VStack alignItems="center" space={2}><Box_ios={{ bg: 'blue.500' }}rounded="md"py={2}px={3}alignSelf="center"><Text textTransform="uppercase" fontWeight="bold" color="white">Primary</Text></Box><Text color="white">iOS</Text></VStack></HStack>
MadeWithNativeBase