I have upgraded my class component
to functional component
hooks, but right now the ref does not work.
Before:
class A extends Component{
animation = null;
onPress = ()=> {
this.animation.play();
}
render(){
return (
<View>
<LottieView
source={require('./file.json')}
ref={animation => {this.animation = animation}}
/>
<Button onPress={this.onPress} title='click me' />
</View>
);
}
}
The above code which it is class Component
works very well.
But the following code which I upgraded doesn't work.
Updated code:
const A = props => {
const animation = useRef(null);
const onPress = ()=> {
animation.play();
}
return (
<View>
<LottieView
source={require('./file.json')}
ref={animation}
/>
<Button onPress={onPress} title='click me' />
</View>
);
}
You're missing .current
.
See working example at: https://snack.expo.io/@zvona/lottie-and-useref-example
const onPress = () => {
animation.current.play();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With