mastermoo / react-native-action-button

customizable multi-action-button component for react-native
MIT License
2.52k stars 570 forks source link

Add useNativeDriver to Animated Spring Animations #382

Open jonathanbensadoun opened 4 months ago

jonathanbensadoun commented 4 months ago

Description: We would like to propose an update to the code to improve the performance of animations in the component in question. Currently, animations use the Animated.spring function without taking advantage of the useNativeDriver property, which can lead to performance issues on certain devices.

message:" WARN Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false"

Proposed Update: Add the useNativeDriver: true property to all occurrences of the Animated.spring function in the component's code.

Affected Code:

javascript Copy code animateButton() { if (this.state.active) { this.reset(); return; }

Animated.spring(this.state.anim, { toValue: 1, duration: 250, useNativeDriver: true, // Add this line }).start();

this.setState({ active: true }); }

reset() { Animated.spring(this.state.anim, { toValue: 0, duration: 250, useNativeDriver: true, // Add this line }).start();

setTimeout(() => { this.setState({ active: false }); }, 250); } Benefits of the Update:

Improved animation performance, especially on lower-end devices. Reduction of latency or stuttering issues during animation execution. Instructions for Collaborators: Please review the proposed code and test the animations on different devices (Android and iOS) to verify the consistency of performance improvements. After confirming that the update indeed enhances animation performance, merge the changes into the main branch.

Preferred Deadline: At your earliest convenience

Acknowledgment: We appreciate your ongoing commitment to improving code quality and application performance. Thank you for your valuable contribution!

jonathan.