Skip to content

Conversation

@m-bert
Copy link
Contributor

@m-bert m-bert commented Mar 5, 2025

Description

Currently activeOpacity property in BorderlessButton doesn't work. It seems like it was broken by #2903. In this PR, AnimatedBaseButton is created from InnerBaseButton instead of BaseButton (which is a wrapper), so that props are correctly passed into animated view.

Fixes #3426

Test plan

Tested on the following example:
import React, { useEffect, useRef } from 'react';
import { StyleSheet } from 'react-native';
import {
  BorderlessButton,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  const buttonRef = useRef(null);

  useEffect(() => {
    console.log(buttonRef);
  }, [buttonRef]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <BorderlessButton
        activeOpacity={0.7}
        ref={buttonRef}
        style={{ width: 100, height: 25, backgroundColor: 'crimson' }}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

>((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);

const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
const AnimatedBaseButton = React.forwardRef<any, BaseButtonWithRefProps>(
Copy link
Member

@latekvo latekvo Mar 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can narrow down this, and other instances of any to React.ComponentType.
The other instances occur on lines: 153, 225 and 266.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in f8d7629

Copy link
Member

@latekvo latekvo Mar 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you might've missed the any occurrence on line 153.
Were there any type issues when changing that occurrence from any to React.ComponentType?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, fixed in b22b0fc

@m-bert m-bert requested a review from latekvo March 6, 2025 12:53
Copy link
Member

@latekvo latekvo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@m-bert m-bert merged commit 249bff2 into main Mar 17, 2025
1 check passed
@m-bert m-bert deleted the @mbert/fix-opacity-ios branch March 17, 2025 11:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

activeOpacity on BorderlessButton does not work on iOS

3 participants