Why .current and .props are always undefined in my react native ref?

Question

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

Answer 1

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>