Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CP-9963 - [Component] AnimatedPressable #2324

Merged
merged 9 commits into from
Feb 26, 2025
Merged

CP-9963 - [Component] AnimatedPressable #2324

merged 9 commits into from
Feb 26, 2025

Conversation

bogdandobritoiu
Copy link
Contributor

@bogdandobritoiu bogdandobritoiu commented Feb 26, 2025

Description

Ticket: CP-9963

Component will be reused for animating cards/buttons/boxes.

Functionality:

  • when pressingIn no event is fired
  • onPress is triggered when user lifts his finger (onPressOut)
  • throttle of 1000ms for stress pressing

Screenshots/Videos

Screen.Recording.2025-02-26.at.20.24.02.mov

Testing

Not much to test, component will be reused on most animations for cards/texts

Checklist

Please check all that apply (if applicable)

  • I have performed a self-review of my code
  • I have verified the code works
  • I have added/updated necessary unit tests
  • I have updated the documentation

Sorry, something went wrong.

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang
onPressIn={onPressIn}
onPressOut={onPressOut}
{...props}
style={[animatedStyle, props.style]}>
Copy link
Contributor

Choose a reason for hiding this comment

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

can we order like this? [props.style, animatedStyle]. I don't think we want the opacity and transform to be overridden by mistake.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, correct.

const opacity = useSharedValue(0)
const scale = useSharedValue(0.8)
export const AnimateFadeScale = memo(
({ children, delay = 0 }: { children: JSX.Element; delay?: number }) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

does it not give you warning about the missing return type?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It doesn't show any warning. On hover it does show that the component returns a React.JSX.Element

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang

Verified

This commit was signed with the committer’s verified signature.
onghwan JungHwan Jang
Copy link
Contributor

@ruijialin-avalabs ruijialin-avalabs left a comment

Choose a reason for hiding this comment

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

❤️ thanks!

@bogdandobritoiu bogdandobritoiu merged commit d39c353 into main Feb 26, 2025
4 checks passed
@bogdandobritoiu bogdandobritoiu deleted the CP-9963 branch February 26, 2025 19:11
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.

None yet

2 participants