Pseudo props | NativeBase

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

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>

Quick Nav

Platform specific styling

MadeWithNativeBase

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