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

Search
K
Hire us
Resources
Data Display
Typography
Disclosure
Media and Icons
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Pseudo props: Overview
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
Copy
<Pressable
_hover={{ bg: 'primary.700' }}
bg="primary.600"
py="2"
px="3"
rounded="sm"
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.
Pressed
Copy
<Pressable
_pressed={{ bg: 'primary.800' }}
bg="primary.600"
py="2"
rounded="sm"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Pressed
</Text>
</Pressable>
Focus
Using _focus pseudo prop, we can customize the style of Pressable component on focus.
Focus
Copy
<Pressable
_focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }}
bg="primary.600"
rounded="sm"
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Focus
</Text>
</Pressable>
Platform specific styling
Using _web, _iOS, _android pseudo props, we can customize the style or behaviour of NativeBase components across platforms.
Save
Web
Save
Android
Save
iOS
Copy
<HStack space={4} justifyContent="center" alignItems="center">
<VStack alignItems="center" space="2">
<Box
_web={{ bg: 'cyan.600' }}
rounded="sm"
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Save
</Text>
</Box>
<Text color="white">Web</Text>
</VStack>
<VStack alignItems="center" space="2">
<Box
_android={{ bg: 'yellow.400' }}
rounded="sm"
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold">
Save
</Text>
</Box>
<Text color="white">Android</Text>
</VStack>
<VStack alignItems="center" space="2">
<Box
_ios={{ bg: 'violet.500' }}
rounded="sm"
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Save
</Text>
</Box>
<Text color="white">iOS</Text>
</VStack>
</HStack>
Nativebase logo
MadeWithNativeBase