sx :pressed prop not overriding styles

[reggieofarrell]

@gluestack-style/react: 0.1.33
react-native: 0.71.8
expo: 48.0.6

I'm trying to create a custom button component in a React Native / Expo project. I like to create base components and then compose others from that base by passing props. My ButtonBase component is working as expected, but when I try to extend it to create an OutlineButton component and change the background color via sx :pressed, it is not picking up the style override.

Here is the ButtonBase code...

import {Text} from '@/components/gluestack'
import {styled} from '@/utils/styled'
import {useState} from 'react'
import {Pressable} from 'react-native'

type TextProps = React.ComponentProps<typeof Text>
type PressableStyledProps = React.ComponentProps<typeof PressableStyled>

export interface ButtonBaseProps extends PressableStyledProps {
  children: React.ReactNode
  buttonTextProps?: TextProps
  Icon?: React.FunctionComponent
  isDisabled?: boolean
  onPress: () => void
}

export const ButtonBase = ({
  children,
  buttonTextProps,
  Icon,
  isDisabled,
  ...otherProps
}: ButtonBaseProps) => {
  const [isPressed, setIsPressed] = useState<boolean>(false)

  const handleTouchStart = () => {
    setIsPressed(true)
  }

  const handleTouchEnd = () => {
    setIsPressed(false)
  }

  return (
    <PressableStyled
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchEnd}
      states={{disabled: isDisabled, pressed: isPressed}}
      disabled={isDisabled}
      {...otherProps}
    >
      {typeof children === 'string' ? (
        <Text
          fontFamily="$heading"
          fontWeight="$semibold"
          color="$white"
          {...buttonTextProps}
        >
          {children}
        </Text>
      ) : (
        children
      )}
      {Icon && <Icon />}
    </PressableStyled>
  )
}

const PressableStyled = styled(Pressable, {
  my: 10,
  py: 14,
  px: 10,
  bgColor: '$primary500',
  borderRadius: '$full',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  ':pressed': {
    bgColor: '$primary600',
  },
  ':disabled': {
    opacity: 0.4,
  },
})

and here is the OutlineButton code...

import {ButtonBase, ButtonBaseProps} from './ButtonBase'

export const OutlineButton = ({children, ...otherProps}: ButtonBaseProps) => {
  return (
    <ButtonBase
      borderWidth="$1"
      borderColor="#909090"
      bgColor="transparent"
      sx={{
        ':pressed': {
          bgColor: '$gray100',
        },
      }}
      buttonTextProps={{
        color: '#909090',
      }}
      {...otherProps}
    >
      {children}
    </ButtonBase>
  )
}

All of the styled overrides are working aside from the :pressed override in the sx prop

I have a possibly related issue filed in the gluestack ui repo...
gluestack/gluestack-ui#843

Originally I was trying to just modify the GlueStack Button component but I was running into issue with style overrides which led me to just trying to implement my own from scratch like this.

I'm also further trying to extend OutlineButton to create a CompactOutlineButton by just passing different px and py props and those are also having no effect...

import {OutlineButton} from './OutlineButton'
import {ButtonBaseProps} from './ButtonBase'

export const CompactOutlineButton = ({
  children,
  ...otherProps
}: ButtonBaseProps) => {
  return (
    <OutlineButton px={10} py={4} {...otherProps}>
      {children}
    </OutlineButton>
  )
}

UPDATE: I also tried swapping out the numeric values for px and py for spacer tokens from the theme but that didn't yield any different results.

[ankit-tailor]

Hey @reggieofarrell , please upgrade the @gluestack-style/react to latest version . It should solve the above issue.

[reggieofarrell]

@ankit-tailor Unfortunately the issue remains. Here is a basic Snack reproducing the issue...

https://snack.expo.dev/@reggiegovside/gluestack-style-overrides-bug

[reggieofarrell]

This appears to be fixed with the latest 2.0.11