Instantiating a second component, while the first one is still animating, does not start from beginning

[raarts]

Hi, I have something like the following:

const AnimatedView = Platform.OS === 'web' ? animated.div : animated(View);

const ToasterBox = () => {
  const props = useSpring({ from: {  opacity: 0,  width: 0 }, to: { opacity: 1, width: 25 }});

  return (
    <AnimatedView style={props}>
      <View style={styles.boxContainer}>
        <Text style={styles.textStyle}>Hello World</Text>
      </View>
    </AnimatedView>
  );
}

The first Toasterbox slides in properly from the right (it's inside a container with style: { position: 'absolute', top: 0, right: 0, }), but if I instantiate a new instance for the component, it doesn't start at the beginning, but moves in concert with the first one.

I tried to put the useSpring inside a useState, but that didn't help.

How can I make the props variable per-component even though it's returned by useSpring? Thanks.

[joshuaellis]

do you have a codesandbox you could share?

[raarts]

Ok, first time I used codesandbox. I tried this in an anonymous window, and it seems to work:
https://codesandbox.io/s/toasters-independent-animation-ikp8e5?file=/src/App.tsx

Click the blue Hello world button. The first time you do this the box slides in from the top-right, but subsequent clicks do not slide.
If you click rapidly, you can see they all slide in concert, so they all seem to be sharing the same animation settings.

Which speaks for itself given how I implemented the ToasterBox component, but how do i all give them their own state?

[joshuaellis]

I think its partly down to using index as the key prop, which has always been advised against because the index changes depending how many elements you're mapping over, so the diffing method of react might not work as well. Other side to this, you could just animate the x value which is probably "cheaper" than changing the width: https://codesandbox.io/s/toasters-independent-animation-forked-gmb8q5?file=/src/Toaster/ToastContext.tsx:941-946

[raarts]

Thanks, both suggestions were helpful, although animating the x value really fixed the problem. In hindsight I realize the bounding rectangle grew with the first box, and the second box already started out at full width because of that.