Pseudo props | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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>
Nativebase logo
MadeWithNativeBase