Animation in header in react-native

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>
    )