Pressable | NativeBase


Show Code
Playground
function Example() {
  return <Pressable>
      {({
      isHovered,
      isFocused,
      isPressed
    }) => {
      return <Box maxW="96" borderWidth="1" borderColor="coolGray.300" shadow="3" bg={isPressed ? 'coolGray.200' : isHovered ? 'coolGray.200' : 'coolGray.100'} p="5" rounded="8" style={{
        transform: [{
          scale: isPressed ? 0.96 : 1
        }]
      }}>
            <HStack alignItems="center">
              <Badge colorScheme="darkBlue" _text={{
            color: 'white'
          }} variant="solid" rounded="4">
                Business
              </Badge>
              <Spacer />
              <Text fontSize={10} color="coolGray.800">
                1 month ago
              </Text>
            </HStack>
            <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
              Marketing License
            </Text>
            <Text mt="2" fontSize="sm" color="coolGray.700">
              Unlock powerfull time-saving tools for creating email delivery and
              collecting marketing data
            </Text>
            <Flex>
              {isFocused ? <Text mt="2" fontSize={12} fontWeight="medium" textDecorationLine="underline" color="darkBlue.600" alignSelf="flex-start">
                  Read More
                </Text> : <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
                  Read More
                </Text>}
            </Flex>
          </Box>;
    }}
    </Pressable>;
}function Example() {
  return <Pressable>
      {({
      isHovered,
      isFocused,
      isPressed
    }) => {
      return <Box maxW="96" borderWidth="1" borderColor="coolGray.300" shadow="3" bg={isPressed ? 'coolGray.200' : isHovered ? 'coolGray.200' : 'coolGray.100'} p="5" rounded="8" style={{
        transform: [{
          scale: isPressed ? 0.96 : 1
        }]
      }}>
            <HStack alignItems="center">
              <Badge colorScheme="darkBlue" _text={{
            color: 'white'
          }} variant="solid" rounded="4">
                Business
              </Badge>
              <Spacer />
              <Text fontSize={10} color="coolGray.800">
                1 month ago
              </Text>
            </HStack>
            <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
              Marketing License
            </Text>
            <Text mt="2" fontSize="sm" color="coolGray.700">
              Unlock powerfull time-saving tools for creating email delivery and
              collecting marketing data
            </Text>
            <Flex>
              {isFocused ? <Text mt="2" fontSize={12} fontWeight="medium" textDecorationLine="underline" color="darkBlue.600" alignSelf="flex-start">
                  Read More
                </Text> : <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
                  Read More
                </Text>}
            </Flex>
          </Box>;
    }}
    </Pressable>;
}

Examples

Basic

Pressable accepts most of the utility style system props.


Playground
function Example() {
  return <Box alignItems="center">
      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5">
        <Box>
          <HStack alignItems="center">
            <Badge colorScheme="darkBlue" _text={{
            color: "white"
          }} variant="solid" rounded="4">
              Business
            </Badge>
            <Spacer />
            <Text fontSize={10} color="coolGray.800">
              1 month ago
            </Text>
          </HStack>
          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
            Marketing License
          </Text>
          <Text mt="2" fontSize="sm" color="coolGray.700">
            Unlock powerfull time-saving tools for creating email delivery and
            collecting marketing data
          </Text>
          <Flex>
            <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
              Read More
            </Text>
          </Flex>
        </Box>
      </Pressable>
    </Box>;
}function Example() {
  return <Box alignItems="center">
      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5">
        <Box>
          <HStack alignItems="center">
            <Badge colorScheme="darkBlue" _text={{
            color: "white"
          }} variant="solid" rounded="4">
              Business
            </Badge>
            <Spacer />
            <Text fontSize={10} color="coolGray.800">
              1 month ago
            </Text>
          </HStack>
          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
            Marketing License
          </Text>
          <Text mt="2" fontSize="sm" color="coolGray.700">
            Unlock powerfull time-saving tools for creating email delivery and
            collecting marketing data
          </Text>
          <Flex>
            <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
              Read More
            </Text>
          </Flex>
        </Box>
      </Pressable>
    </Box>;
}

Accessing events (hover, focus and pressed)

Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props.


Playground
function Example() {
  return <Box alignItems="center">
      <Pressable maxW="96">
        {({
        isHovered,
        isFocused,
        isPressed
      }) => {
        return <Box bg={isPressed ? "coolGray.200" : isHovered ? "coolGray.200" : "coolGray.100"} style={{
          transform: [{
            scale: isPressed ? 0.96 : 1
          }]
        }} p="5" rounded="8" shadow={3} borderWidth="1" borderColor="coolGray.300">
              <HStack alignItems="center">
                <Badge colorScheme="darkBlue" _text={{
              color: "white"
            }} variant="solid" rounded="4">
                  Business
                </Badge>
                <Spacer />
                <Text fontSize={10} color="coolGray.800">
                  1 month ago
                </Text>
              </HStack>
              <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
                Marketing License
              </Text>
              <Text mt="2" fontSize="sm" color="coolGray.700">
                Unlock powerfull time-saving tools for creating email delivery
                and collecting marketing data
              </Text>
              <Flex>
                {isFocused ? <Text mt="2" fontSize={12} fontWeight="medium" textDecorationLine="underline" color="darkBlue.600" alignSelf="flex-start">
                    Read More
                  </Text> : <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
                    Read More
                  </Text>}
              </Flex>
            </Box>;
      }}
      </Pressable>
    </Box>;
}function Example() {
  return <Box alignItems="center">
      <Pressable maxW="96">
        {({
        isHovered,
        isFocused,
        isPressed
      }) => {
        return <Box bg={isPressed ? "coolGray.200" : isHovered ? "coolGray.200" : "coolGray.100"} style={{
          transform: [{
            scale: isPressed ? 0.96 : 1
          }]
        }} p="5" rounded="8" shadow={3} borderWidth="1" borderColor="coolGray.300">
              <HStack alignItems="center">
                <Badge colorScheme="darkBlue" _text={{
              color: "white"
            }} variant="solid" rounded="4">
                  Business
                </Badge>
                <Spacer />
                <Text fontSize={10} color="coolGray.800">
                  1 month ago
                </Text>
              </HStack>
              <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
                Marketing License
              </Text>
              <Text mt="2" fontSize="sm" color="coolGray.700">
                Unlock powerfull time-saving tools for creating email delivery
                and collecting marketing data
              </Text>
              <Flex>
                {isFocused ? <Text mt="2" fontSize={12} fontWeight="medium" textDecorationLine="underline" color="darkBlue.600" alignSelf="flex-start">
                    Read More
                  </Text> : <Text mt="2" fontSize={12} fontWeight="medium" color="darkBlue.600">
                    Read More
                  </Text>}
              </Flex>
            </Box>;
      }}
      </Pressable>
    </Box>;
}

Props

Pressable

Pressable implements

onHoverIn

Called when a mouse enters the Pressable

Type: () => void

onHoverOut

Called when a mouse leaves the Pressable

Type: () => void

onFocus

Called when Pressable receives focus

Type: () => void

onBlur

Called when Pressable loses focus

Type: () => void

_hover

Style props to be applied when hovered

Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_hover">

_pressed

Style props to be applied when pressed

_focus

Style props to be applied when focus

_disabled

Style props to be applied when disabled

isDisabled

If true, the p will be disabled.

Type: boolean

isHovered

If true, the p will be hovered.

Type: boolean