Add Pressable Component

Would be nice if dripsy could export the Pressable component from react-native.

Sometimes the A component is not sufficient and one would like to use the Pressable. If i get it right, its basically a View component.

import { Pressable as RNPressable } from 'react-native'
import { createThemedComponent } from 'dripsy'

export const Pressable = createThemedComponent(RNPressable)

works fine for me.

[nandorojo]

Yeah, I agree. I was waiting for people to catch up on upgrading to RNW 0.14 before adding it in.

This is the code I’m using in my app now. Happy to add it to Dripsy along with #48

import React, { ReactNode, ComponentProps } from 'react'
import { styled } from 'dripsy'
import {
  Pressable as NativePressable,
  PressableStateCallbackType,
  ViewStyle,
} from 'react-native'

type CallbackWithHovered = PressableStateCallbackType & { hovered?: boolean }
const StyledPressable = styled(NativePressable)({})

type Props = {
  style?: ((prop: CallbackWithHovered) => ViewStyle) | ViewStyle
  children?: ReactNode | ((prop: CallbackWithHovered) => ReactNode)
} & Omit<ComponentProps<typeof StyledPressable>, 'children' | 'style'>

export default React.forwardRef(function Pressable(
  { sx = {}, ...props }: Props,
  ref: ComponentProps<typeof StyledPressable>['ref']
) {
  return (
    <StyledPressable
      {...props}
      ref={ref}
      sx={{
        cursor:
          props.onPress || props.accessibilityRole === 'link'
            ? 'pointer'
            : 'default',
        ...sx,
      }}
    />
  )
})

This supports this usage:

<Pressable>
  {({ hovered, pressable }) => ...}
</Pressable>

The one missing piece is adding the hovered, pressed methods as parts of the sx prop.

<Pressable sx={({ hovered, pressable }) => ({ bg: hovered ? 'primary' : 'text' })}>
  This isn't supported yet.
</Pressable>

I’ll have to give that some thought. Maybe if the sx prop is a function, we can pass it as a function to Pressable’s style, along with a css call. I’ll think about.

[nandorojo]

React Native Web 0.14 extends Pressable to include hovered