CODEWITHSUNDEEP
react-nativeanimation
Jats1596
Jats1596

Reputation: 1215

Animation in header in react-native

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

Upvotes: 0

Views: 120

Answers (1)

Rey
Rey

Reputation: 650

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

Upvotes: 1

Related Questions