How can I keep animations when the component mounts/unmounts

[code-504]

I have a FlashList where you can select multiple items with long press, and it displays an animation. It works, but the problem I'm facing right now is that when you scroll down and then scroll back up, the card mounts again and the animation is triggered. I don't want the animation to show when the component mounts or unmounts.

here is my code

import { View } from "react-native";
import React, { memo, useEffect } from "react";
import { Divider } from "@/components/ui/divider";
import { HStack } from "@/components/ui/hstack";
import { VStack } from "@/components/ui/vstack";
import { Text } from "@/components/ui/text";
import { Chip } from "@app/componentsV2/Chip";
import PublicIcon from "@app/resources/icons/public.svg";
import {
  IconOutline as AntDesignIcons,
  IconFill as AntDesignIconsFill,
} from "@ant-design/icons-react-native";
import { Icon } from "@/components/ui/icon";
import type { PendingCardProps } from "./PendingCard.d";
import { TaskStatus } from "@app/pages/Pendings/Pendings.d";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  withSequence,
  Easing,
} from "react-native-reanimated";

// Create an animated version of AntDesignIconsFill
const AnimatedIconFill = Animated.createAnimatedComponent(AntDesignIconsFill);

const PendingCard: React.FC<PendingCardProps> = ({
  item: {
    id,
    title,
    description,
    date,
    priority,
    status,
    isPublic,
    needsAproval,
  },
  isChecked,
}) => {
  // Animation values
  const scale = useSharedValue(0);
  const opacity = useSharedValue(0);
  const rotate = useSharedValue(0);

  useEffect(() => {
    if (isChecked) {
      scale.value = withSequence(
        withSpring(0.0, { damping: 4 }),
        withSpring(1, { damping: 10 })
      );
      opacity.value = withTiming(1, { duration: 200 });
      rotate.value = withTiming(360, {
        duration: 450,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
      });
    } else {
      scale.value = withTiming(0, { duration: 150 });
      opacity.value = withTiming(0, { duration: 150 });
      rotate.value = 0;
    }
  }, [isChecked]);

  const animatedIconStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }, { rotateZ: `${rotate.value}deg` }],
      opacity: opacity.value,
    };
  });

  const getStatusBgColor = (): string => {
    switch (status) {
      case TaskStatus.ON_TIME:
        return "bg-background-ontime";
      case TaskStatus.WAITING_TO_START:
        return "bg-background-tostart";
      case TaskStatus.STUCK:
        return "bg-background-deadline";
      default:
        return "bg-gray-500";
    }
  };

  return (
    <View className="flex-1">
      <HStack className="flex-1" space="md">
        <Divider
          className={`w-1 rounded-full ${getStatusBgColor()}`}
          orientation="vertical"
        />

        <VStack space="sm" className="flex-1 justify-between">
          <HStack space="sm" className="flex-1">
            <VStack space="xs" className="flex-1">
              <Text className="font-semibold" numberOfLines={1}>
                {title}
              </Text>
              <Text className="text-sm" numberOfLines={1}>
                {description}
              </Text>
            </VStack>

            <AnimatedIconFill
              name="check-circle"
              size={24}
              color="blue"
              style={animatedIconStyle}
            />
          </HStack>

          <HStack space="md" className="items-center justify-between">
            <HStack space="md" className="items-center">
              <Chip size="sm">
                <HStack space="md" className="items-center">
                  <AntDesignIcons
                    name="clock-circle"
                    size={16}
                    color={priority.Color}
                  />
                  <Text>{date}</Text>
                </HStack>
              </Chip>

              <Chip size="sm" idleBg="bg-[#FFC107]">
                <Text className="font-semibold text-sm color-white">
                  {priority.Title}
                </Text>
              </Chip>

              {isPublic && <Icon size="md" stroke="none" as={PublicIcon} />}

              {needsAproval && <AntDesignIcons name="eye" size={24} />}
            </HStack>

            <HStack space="sm" className="items-center justify-between">
              <AntDesignIcons name="message" size={24} />
              <Chip size="sm" idleBg="bg-primary-400">
                <Text className="text-sm text-white font-bold">99+</Text>
              </Chip>
            </HStack>
          </HStack>
        </VStack>
      </HStack>
    </View>
  );
};

export default memo(PendingCard);

[MatiPl01]

You should keep state outside of your list item components. e.g. you can create a Shared Value that is an object or an array with indices of selected items. Then, you can pass this array (as a Shared Value) to all list item components and read state from this object/array.

[code-504]

How can I set an object of shared values?

Currently, I code this but the console log throws :

[Reanimated] Writing to `value` during component render. Please ensure that you do not access the `value` property or use `set` method of a shared value while React is 
rendering a component.

I'm new at react-native-reanimated and I don't how to set this.

My List container: (OptimizedList is my flashlist)

interface CustomItemData {
  id: string;
  title: string;
  description: string;
  isChecked?: boolean;
  date: string;
  status: TaskStatus;
  priority: {
    Color: string;
    IdTaskPriority: number;
    Title: string;
  };
  isPublic: boolean;
  needsApproval: boolean;
}

const data = Array.from({ length: 1000 }, (_, index) => ({
  id: "dsd" + String(index + 1),
  title: `Item ${index + 1}`,
  description: `This is item ${index + 1}`,
  isChecked: false,
  date: "8/Mar 17:00",
  status: TaskStatus.ON_TIME,
  priority: {
    Color: "red",
    IdTaskPriority: 43424,
    Title: "Media",
  },
  isPublic: true,
  needsApproval: false,
}));

export interface SharedAnimation {
  opacity: number;
  rotate: number;
  scale: number;
}
export interface SharedStore {
  [key: string]: SharedAnimation;
}

const PendingListContainer: React.FC = observer(() => {
  const { setSelectItem, selectedItems } = pendingsStore$;
  const selectedItemsList = selectedItems.get();
  const hasLongPressed = selectedItemsList.length > 0;

  const sharedStore = useSharedValue<SharedStore>({});

  const getSharedStoreById = (id: string): SharedAnimation => {
    const exists = Object.hasOwn(sharedStore, id);

    if (exists) return sharedStore.value[id];

    const sharedValue: SharedAnimation = {
      opacity: 0,
      rotate: 0,
      scale: 0,
    };

    sharedStore.set({
      [id]: sharedValue,
    });

    return sharedValue;
  };

  const setSharedStoreById = (
    id: string,
    sharedValue: SharedAnimation
  ): void => {
    sharedStore.value = {
      ...sharedStore.value,
      [id]: sharedValue,
    };
  };

  const animateSelect = (id: string): void => {
    const values = {
      opacity: 0,
      rotate: 0,
      scale: 0,
    };

    values.scale = withSequence(
      withSpring(0.0, { damping: 4 }),
      withSpring(1, { damping: 10 })
    );
    values.opacity = withTiming(1, { duration: 200 });
    values.rotate = withTiming(360, {
      duration: 450,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
    });

    setSharedStoreById(id, values);
  };

  const handleOnSelect = (item: CustomItemData): void => {
    setSelectItem({ id: item.id });
    animateSelect(item.id);
  };

  const renderItem = useCallback(
    ({ item }: { item: CustomItemData }) => {
      const values = getSharedStoreById(item.id);

      const isChecked = selectedItemsList.some(
        (selected) => selected.id === item.id
      );

      return (
        <AnimatedPressable
          onPress={() => (hasLongPressed ? handleOnSelect(item) : undefined)}
          onLongPress={() => handleOnSelect(item)}
        >
          <Card
            className={`flex-1 h-32 ${
              isChecked ? "border-b border-blue-100 bg-secondary-100/50" : ""
            }`}
            containerStyle="px-4 py-2"
          >
            <PendingCard item={item} sharedValues={values} />
          </Card>
        </AnimatedPressable>
      );
    },
    [hasLongPressed, selectedItemsList]
  );

  return (
    <View style={{ flex: 1 }}>
      <OptimizedList
        data={data}
        extraData={selectedItemsList}
        Header={
          <VStack space="lg" className="px-4 pb-4">
            <Search />
            <HStack space="md" className="w-full">
              <Chip isSelected>
                <ChipCounter isSelected title="Todas" count={10} />
              </Chip>
              <Chip>
                <ChipCounter title="Actuales" count={120} />
              </Chip>
              <Chip>
                <ChipCounter title="Por iniciar" count={6} />
              </Chip>
            </HStack>
          </VStack>
        }
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        estimatedItemSize={128}
      />
    </View>
  );
});

export default PendingListContainer;

My PendingCard:

// Create an animated version of AntDesignIconsFill
const AnimatedIconFill = Animated.createAnimatedComponent(AntDesignIconsFill);

const PendingCard: React.FC<PendingCardProps> = ({
  item: {
    id,
    title,
    description,
    date,
    priority,
    status,
    isPublic,
    needsAproval,
  },
  sharedValues,
}) => {
  const { opacity, rotate, scale } = sharedValues;

  const animatedIconStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale }, { rotateZ: `${rotate}deg` }],
      opacity,
    };
  });

  const getStatusBgColor = (): string => {
    switch (status) {
      case TaskStatus.ON_TIME:
        return "bg-background-ontime";
      case TaskStatus.WAITING_TO_START:
        return "bg-background-tostart";
      case TaskStatus.STUCK:
        return "bg-background-deadline";
      default:
        return "bg-gray-500";
    }
  };

  return (
    <View className="flex-1">
      <HStack className="flex-1" space="md">
        <Divider
          className={`w-1 rounded-full ${getStatusBgColor()}`}
          orientation="vertical"
        />

        <VStack space="sm" className="flex-1 justify-between">
          <HStack space="sm" className="flex-1">
            <VStack space="xs" className="flex-1">
              <Text className="font-semibold" numberOfLines={1}>
                {title}
              </Text>
              <Text className="text-sm" numberOfLines={1}>
                {description}
              </Text>
            </VStack>

            <AnimatedIconFill
              name="check-circle"
              size={24}
              color="blue"
              style={animatedIconStyle}
            />
          </HStack>

          <HStack space="md" className="items-center justify-between">
            <HStack space="md" className="items-center">
              <Chip size="sm">
                <HStack space="md" className="items-center">
                  <AntDesignIcons
                    name="clock-circle"
                    size={16}
                    color={priority.Color}
                  />
                  <Text>{date}</Text>
                </HStack>
              </Chip>

              <Chip size="sm" idleBg="bg-[#FFC107]">
                <Text className="font-semibold text-sm color-white">
                  {priority.Title}
                </Text>
              </Chip>

              {isPublic && <Icon size="md" stroke="none" as={PublicIcon} />}

              {needsAproval && <AntDesignIcons name="eye" size={24} />}
            </HStack>

            <HStack space="sm" className="items-center justify-between">
              <AntDesignIcons name="message" size={24} />
              <Chip size="sm" idleBg="bg-primary-400">
                <Text className="text-sm text-white font-bold">99+</Text>
              </Chip>
            </HStack>
          </HStack>
        </VStack>
      </HStack>
    </View>
  );
};

export default memo(PendingCard);

[MatiPl01]

You should not read/write to them when in the component scope (because of that you are seeing this warning). You can access them in callback functions, like the one passed to useEffect hook or in the worklet functions from Reanimated that run on the UI thread (like callback to useAnimatedReaction, useAnimatedStyle, etc.),

Selecting a value

In your case, to get a single value from an object stored as a Shared Value, you would have to use a useDerivedValue hook inside the PendingCard (as hooks cannot be used in functions, so you won't be able to use it in the renderItem function). Pass your sharedStore to the PendingCard and select a proper value with useDerivedValue as follows:

const selected = useDerivedValue(() => sharedStore.get()[id]);

Modifying a value

To modify a value in the sharedStore efficiently, you can use the .modify() method on the Shared Value (see the last example in docs at the bottom of the page). You can use it in this way:

sv.modify((value) => {
  'worklet';
  value[id] = selected; // set `true` or `false` here when you select/deselect an item
  return value;
});

[MatiPl01]

You should also move all the animations logic, where you calculate rotation, scale, opacity, etc. to the list item component (PendingCard) instead of passing them from the parent component. You can calculate them based on the selected value changes that you will get from the sharedStore. If the selected value changes to true, then you should fire an animation. You can do this just in the useAnimatedStyle in a similar way to this:

const animatedIconStyle = useAnimatedStyle(() => {
  const from = selected.get() ? 0 : 1;
  const to = selected.get() ? 1 : 0;

  const scale = withSequence(
    withSpring(from, { damping: 4 }),
    withSpring(to, { damping: 10 })
  );
  const opacity = withTiming(to, { duration: 200 });
  const rotate = withTiming(360 * to, {
    duration: 450,
    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  });

  return {
    transform: [{ scale }, { rotateZ: `${rotate}deg` }],
    opacity,
  };
});

You shouldn't have to introduce any helper Shared Values for rotation, scale and opacity.

[code-504]

I applied the changes and the animation works but it keeps triggering the animation. FlashList reuses the items and applies the animation again.

I also implement the animation outside the card but when the card mounts, it doesn't show the icon.

My current implementation:

List:

...
export interface SharedStore {
  [key: string]: boolean;
}

const PendingListContainer: React.FC = observer(() => {
  const { setSelectItem, selectedItems } = pendingsStore$;
  const selectedItemsList = selectedItems.get();
  const hasLongPressed = selectedItemsList.length > 0;

  const sharedStore = useSharedValue<SharedStore>({});

  const handleOnSelect = (item: CustomItemData, isChecked: boolean): void => {
    setSelectItem({ id: item.id });

    sharedStore.modify((value) => {
      "worklet";
      value[item.id] = !isChecked;
      return value;
    });
  };

  const renderItem = useCallback(
    ({ item }: { item: CustomItemData }) => {
      const isChecked = selectedItemsList.some(
        (selected) => selected.id === item.id
      );

      return (
        <AnimatedPressable
          onPress={() =>
            hasLongPressed ? handleOnSelect(item, isChecked) : undefined
          }
          onLongPress={() => handleOnSelect(item, isChecked)}
        >
          <Card
            className={`flex-1 h-32 ${
              isChecked ? "border-b border-blue-100 bg-secondary-100/50" : ""
            }`}
            containerStyle="px-4 py-2"
          >
            <PendingCard item={item} sharedStore={sharedStore} />
          </Card>
        </AnimatedPressable>
      );
    },
    [hasLongPressed, selectedItemsList]
  );
  ...

Pending Card:

...
const selected = useDerivedValue(() => sharedStore.get()[id] ?? false);

  const animatedIconStyle = useAnimatedStyle(() => {
    const to = selected.get() ? 1 : 0;

    const opacity = withTiming(to, { duration: 200 });

    return {
      opacity,
    };
  }, [selected]);
...