Pseudo props: Overview

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>

Design Tokens

Pseudo Props: Dos & Don'ts

Quick Nav

Hover

Pressed

Focus

Platform specific styling

MadeWithNativeBase

gluestack-ui

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