Issue with 2 different transitions on same component

[MaganAnkur]

Thanks for such a great library.

I am facing an issue where in there are two different transitions happening on 2 diff components but seems like one component animation stops working when other transition hits.

##Marker

<MapboxGL.MarkerView id="1" coordinate={[-899.664062, 933.769859]}>
          <View style={tailwind('justify-center items-center flex-1')}>
            <View style={dotStyle}>
              {[...Array(1).keys()].map(index => {
                return (
                  <MotiView
                    from={{opacity: 0.7, scale: 1}}
                    animate={{opacity: 0, scale: 2}}
                    transition={{
                      type: 'timing',
                      duration: 1500,
                      easing: Easing.out(Easing.ease),
                      loop: true,
                      repeatReverse: false,
                    }}
                    key={index}
                    style={dotStyle}></MotiView>
                );
              })}
            </View>
          </View>
        </MapboxGL.MarkerView>

##Switch

 <Pressable onPress={onPress}>
      <View style={tailwind('items-center justify-center')}>
        {/* Track */}
        <MotiView
          transition={transition}
          animate={{backgroundColor: isActive ? activeColor : inAcitveColor}}
          style={[
            tailwind('absolute'),
            {
              width: trackWidth,
              height: trackHeight,
              borderRadius: trackHeight / 2,
              backgroundColor: activeColor,
            },
          ]}>
          {/* Text Container */}
          <MotiView
            transition={transition}
            animate={{
              translateX: isActive ? trackWidth / 50 : -trackWidth / 3.2,
            }}
            style={[
              tailwind('self-end justify-center items-center'),
              {
                width: size * 1.3,
                height: trackHeight,
                borderRadius: trackHeight / 2,
                flexDirection: 'row',
              },
            ]}>
            {isActive ? <Online></Online> : <Offline></Offline>}
            <MotiText
              style={tailwind('text-white font-RobotoMedium text-base ml-2')}>
              {isActive ? 'Online' : 'Offline'}
            </MotiText>
          </MotiView>
        </MotiView>
        {/* Knob */}
        <MotiView
          transition={transition}
          animate={{
            translateX: isActive ? -trackWidth / 3.5 : trackWidth / 3.5,
          }}
          style={[
            tailwind('justify-center items-center bg-white rounded-full'),
            {width: knobSize, height: knobSize},
          ]}
        />
      </View>
    </Pressable>

If you notice user location animation is working as expected but as soon as I toggle the switch it stops animating,

Is it something to do with parallel transition, if yes can somebody pls suggest me how to do it.

Thanks in advance.

https://user-images.githubusercontent.com/42070594/154765288-f13a1965-72e0-4ccf-9cb4-d4dcc35292eb.mov

cc : @nandorojo

[usamaabutt]

I have the same sort of issue +1

[nandorojo]

I need a better reproduction than this to investigate. I think rerenders can cause loop: true to mess up with reanimated, so consider memoizing your components by wrapping them with useMemo or React.memo. Also, I don't know why you're creating an array with one item and mapping over that in your first component.

[MaganAnkur]

I need a better reproduction than this to investigate. I think rerenders can cause loop: true to mess up with reanimated, so consider memoizing your components by wrapping them with useMemo or React.memo. Also, I don't know why you're creating an array with one item and mapping over that in your first component.

@nandorojo Thanks for your response.

I wrapped Marker component in useMemo and it started working as expected and about an array with one item thats by mistake I was trying something and forgot to remove.

Closing this.