Animation in header in react-native - react-native

Question

Hi I have an image in my HeaderRight and I want to animate it with an effect of zoom-in/zoom-out. How can I use the Animated library in order to work it out ?
Thanks !
let headerRight = (
<TouchableOpacity onPress = {() => {this.openDialog(true)} }>
<View style={{ flexDirection:'row', justifyContent: 'space-around'}}>
<View style={{borderRadius: 30, padding:4, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
<Image
style={{ width:28, height: 28}}
source={require("../Images/icone-sonnerie.png")}/>
</View>
</View>
</TouchableOpacity>
);

Answer 1

You can implement animated touchableOpacity like this
create class
import React from 'react'
import {
Animated,
TouchableOpacity
} from 'react-native'
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity)
class AnimatedTouchableOpacity extends React.Component {
state = {
scale: new Animated.Value(1)
}
ScaleTheTouchable(toValue, withDuration) { //Call this function in this class in onPress or another event call you want with your scale (1 is the normal size) and duration in miliseconds
Animated.timing(
this.state.scale,
{
toValue: toValue,
duration: withDuration
},
).start()
}
render() {
return (
<AnimatedTouchable
style = {[
{
transform: [{
scale: this.state.scale
}]
},
this.props.style
]}
>
{this.props.children}//Your image or another view inside button goes here...
</AnimatedTouchable>
)
}
}
then you can call it like this
let headerRight = (
<AnimatedTouchableOpacity style = {{}} >
<View style={{ flexDirection:'row', justifyContent: 'space-around'}}>
<View style={{borderRadius: 30, padding:4, overflow: 'hidden', alignItems: 'center',backgroundColor:'white', justifyContent: 'center', marginRight:20 }}>
<Image
style={{ width:28, height: 28}}
source={require("../Images/icone-sonnerie.png")}/>
</View>
</View>
</AnimatedTouchableOpacity>
)