Is there a way to make Animated.Value an array in React Native?

Question

I want to store the heights of multiple <View>s in an array, and animate all of those values together. Something like this:

<Animated.View style={{height: this.state.heights[0]}}/>
<Animated.View style={{height: this.state.heights[1]}}/>
<Animated.View style={{height: this.state.heights[2]}}/>

However, when I try to do this:

this.state = {
  heights: new Animated.Value([10, 20, 30])
}

this doesn't work.

Any tips?

Answer 1

Create an array of Animated.Value like

this.heights = [new Animated.Value(10), new Animated.Value(20), new Animated.Value(30)];

Then use composing animation function to run those animations as per your requirement

Animated.parallel([
  Animated.timing(this.heights[0], { toValue: **, duration: **}),
  Animated.timing(this.heights[1], { toValue: **, duration: **}),
  Animated.timing(this.heights[2], { toValue: **, duration: **})
]).start()

Then use the this.heights in the renderer method like

<Animated.View style={{height: this.heights[0]}}/>
<Animated.View style={{height: this.heights[1]}}/>
<Animated.View style={{height: this.heights[2]}}/>

Hope this will help!

Answer 2

Thank you for the post. So I am following this example on my code, but my animation is not being triggered for some reason. The array from the useRef is being changed, but the animation is not working, any ideas of what could be the issue, here is my code. I am trying to expand my card to make the height bigger whenever the user press the View Information button. Thank you!

  const animateCardAll = useRef([]);


{markersArr.map((marker, index) => {
          animateCardAll.current[index] = new Animated.Value(CARD_HEIGHT);
          marker.isExpanded = false;
          (marker.imageFetched = false), console.log(marker);
          return (
            <>
              <Animated.View
                key={marker._id}
                style={[
                  styles.card,
                  {
                    height: animateCardAll.current[index],
                  },
                ]}
              >
                {marker.imageId ? (
                  <LazyImage
                    index={index}
                    //visibleImages={visibleImages}
                    imageId={marker.imageId}
                    userToken={userToken}
                    ref={(cardRefs.current[index] = marker)}
                  />
                ) : null}
                <View style={styles.textContent}>
                  <Text style={styles.cardTitle} numberOfLines={1}>
                    Address: {marker.address}
                  </Text>
                  
                  <Text style={styles.cardDescription} numberOfLines={1}>
                    {marker.city}, {marker.zip_code} {marker.uSstate}
                  </Text>
                  
                  {cardRefs.current[index] &&
                  cardRefs.current[index].isExpanded ? (
                    <ReviewsComponent
                      index={index}
                      addressId={marker._id}
                      userToken={userToken}
                    />
                  ) : null}
                </View>

                <View style={styles.button}>
                  <TouchableOpacity
                    onPress={() => {
                      expandCardAll(index);
                    }}
                    style={[
                      styles.signIn,
                      {
                        borderColor: "#398984",
                        borderWidth: 1,
                      },
                    ]}
                  >
                    <Text
                      style={[
                        styles.textSign,
                        {
                          color: "#398984",
                        },
                      ]}
                    >
                      VIEW INFORMATION
                    </Text>
                  </TouchableOpacity>
                </View>
              </Animated.View>
            </>
          );
        })}
      </Animated.ScrollView>
    ) : null}

 const expandCardAll = (index) => {


cardRefs.current[index].isExpanded = !cardRefs.current[index].isExpanded; // Toggle the expanded state

const upadtedHeight = cardRefs.current[index].isExpanded
  ? SCREEN_HEIGHT * 0.65
  : CARD_HEIGHT;
console.log(
  "Expanded",
  cardRefs.current[index],
  animateCardAll.current[index],
  animateCardAll,
  upadtedHeight
);

Animated.timing(animateCardAll.current[index], {
  toValue: upadtedHeight,
  duration: 500,
  useNativeDriver: false,
}).start(); };

As I mentioned, the value in my animateCardAll.current[index] is being updated properly, but no animation is being triggered.