Issue: useNativeDriver is now required by React Native Animated API. Docs
Errors: Warnings are being thrown indicating the above issue.
Recommendation: Add useNativeDriver support to repo
Tested the below code and appears to have solved the above issue.
`
const propTypes = {
backgroundColor: PropTypes.string,
borderColor: PropTypes.string,
borderRadius: PropTypes.number,
buttonColor: PropTypes.string,
buttonSize: PropTypes.number.isRequired,
okButton: PropTypes.object,
okIcon: PropTypes.any,
onVerified: PropTypes.func.isRequired,
icon: PropTypes.node,
text: PropTypes.string,
textColor: PropTypes.string,
useNativeDriver: PropTypes.boolean
};
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
const positionXY = this.state.drag.__getValue();
this.state.drag.setOffset(positionXY);
this.state.drag.setValue({ x: 0, y: 0 });
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.drag.x }],
{ useNativeDriver: true },
...
}
}
reset() {
this.state.drag.setOffset({ x: 0, y: 0 });
Animated.timing(this.state.drag, {
toValue: { x: 0, y: 0 },
duration: 300,
useNativeDriver: this.props.useNativeDriver
}).start();
this.toggleShowAnimation(
true,
this.props.okButton.duration,
this.props.useNativeDriver
);
}
toggleShowAnimation(visible, duration, useNativeDriver) {
Animated.timing(
// Animate over time
this.state.buttonOpacity, // The animated value to drive
{
toValue: visible ? 1 : 0, // Animate to opacity: 1 (opaque)
duration: duration, // Make it take a while
useNativeDriver: useNativeDriver
}
).start();
}
`
Issue: useNativeDriver is now required by React Native Animated API. Docs
Errors: Warnings are being thrown indicating the above issue.
Recommendation: Add useNativeDriver support to repo
Tested the below code and appears to have solved the above issue.
`
const propTypes = {
backgroundColor: PropTypes.string,
borderColor: PropTypes.string,
borderRadius: PropTypes.number,
buttonColor: PropTypes.string,
buttonSize: PropTypes.number.isRequired,
okButton: PropTypes.object,
okIcon: PropTypes.any,
onVerified: PropTypes.func.isRequired,
icon: PropTypes.node,
text: PropTypes.string,
textColor: PropTypes.string,
useNativeDriver: PropTypes.boolean
};
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
const positionXY = this.state.drag.__getValue();
this.state.drag.setOffset(positionXY);
this.state.drag.setValue({ x: 0, y: 0 });
},
onPanResponderMove: Animated.event(
[null, { dx: this.state.drag.x }],
{ useNativeDriver: true },
...
}
}
reset() {
this.state.drag.setOffset({ x: 0, y: 0 });
Animated.timing(this.state.drag, {
toValue: { x: 0, y: 0 },
duration: 300,
useNativeDriver: this.props.useNativeDriver
}).start();
this.toggleShowAnimation(
true,
this.props.okButton.duration,
this.props.useNativeDriver
);
}
toggleShowAnimation(visible, duration, useNativeDriver) {
Animated.timing(
// Animate over time
this.state.buttonOpacity, // The animated value to drive
{
toValue: visible ? 1 : 0, // Animate to opacity: 1 (opaque)
duration: duration, // Make it take a while
useNativeDriver: useNativeDriver
}
).start();
}
`