I want to animate my Animated.View using click event of a dynamic layout. I'm creating the refs like this
In constructor
this.HeadingAnimationRefs = []
then in my component
<Animated.View ref={ref => this.HeadingAnimationRefs[index] = ref}>
<Text style={styles.boldHeading}>Hello</Text>
</Animated.View>
and on my onPress method
onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].current)}
or
onPress={() => console.log('Hi ', this.HeadingAnimationRefs[index].props)}
Please tell me the proper way to highlight/animate a view. I've tried using TouchableOpacity but it is not animating when clicked programmatically so I decided to wrap it in Animated.View but now I cannot animate the Animated.View.
Thanks
I was able to animate the view without using the refs like this.
In state I used an array to store anim reference value for my components, then in the onPress method I called the animation function with reference to the index of my respective component.
Animation method
animateView = (index) => {
Animated.timing(this.state.questionLocations[questionIndex].anim, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}).start(
() => {
Animated.timing(this.state.questionLocations[questionIndex].anim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start()
}
);
}
and onPress
onPress={() => this.animateView(index)}
and finally set the opacity of Animated.View like this
<Animated.View style={{ opacity: this.state.questionLocations[questionIndex]?.anim }}>
<Text style={styles.boldHeading}>Hello</Text>
</Animated.View>