activeOpacity on BorderlessButton does not work on iOS

[vendramini]

Description

<BorderlessButton activeOpacity={.7} borderless={false}/> was supposed to make it opaque on iOS, however it does nothing.

Steps to reproduce

2. Click on it.

Snack or a link to a repository

https://snack.expo.dev/@rosterelf/borderless-button?platform=ios

Gesture Handler version

2.24.0

React Native version

0.77.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone SE 18.2

Acknowledgements

Yes

[vendramini]

Repro: https://snack.expo.dev/@rosterelf/borderless-button?platform=ios

[PatrykMoskal]

I've digged down the component and turned out that the opacity is not properly propagated down the tree, adding Animated.View as direct child of BorderlessButton and moving styles to it resolves the issue, however I'm not sure if the behaviour of opacity should work like light switch instead of smooth interpolation.

`

return (
  <BaseButton
    {...rest}
    // @ts-ignore We don't want `innerRef` to be accessible from public API.
    // However in this case we need to set it indirectly on `BaseButton`, hence we use ts-ignore
    innerRef={innerRef}
    onActiveStateChange={this.onActiveStateChange}
    style={[style]}>
      <Animated.View style={Platform.OS === 'ios' ? { opacity: this.opacity } : {}}>
    {children}
    </Animated.View>
  </BaseButton>
);

}`

[vendramini]

Hey, thank you!

@m-bert sorry tagging you... Can we have this fix next release? :)

Thanks guys!

[m-bert]

HI @vendramini! First I'd like to check when it broke, because I'm pretty sure it did work before 😅

[m-bert]

@vendramini, could you please check if #3433 works? 😅

[vendramini]

@m-bert working perfectly 💯 🥇 👍 thank you <3

"react-native-gesture-handler": "github:software-mansion/react-native-gesture-handler#pull/3433/head"