export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated'

[MahmonirB]

I Added react-native-reanimated in the project that is using react-native-web. I added this code

to represent bottom sheet but I faced below error:

export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
My code:

import BottomSheet from 'reanimated-bottom-sheet';
import { colors } from '@app/styles/colors';
import Icon from 'react-native-vector-icons/AntDesign';
import Menu from './Menu';
import { useFavorite } from '@app/store/favorites';
import useClipboard from '@app/hooks/useClipboard';
....

function ListItem({ title, showMenu, content, onClick }: BoolListItemProps) {
  const [open, setOpen] = useState(false);
  const sheetRef = useRef<any>(null);

  const [, setToClipboard] = useClipboard();

  const categoryName: any = useFavorite((state: any) => state.categoryName);
  const updateCategoryName: any = useFavorite(
    (state: any) => state.updateCategoryName,
  );

  const handleClose = useCallback(() => setOpen(false), []);

  const handleOpen = useCallback(() => sheetRef.current.snapTo(0), []);

  const addToFavorite = () =>
    updateCategoryName([...categoryName, content[0]?.value]);

  const removeFromFavorite = () => {
    const currentCategoryName = [...categoryName];
    const index = categoryName?.findIndex(
      (item: string) => item === content[0]?.value,
    );
    currentCategoryName?.splice(index, 1);
    updateCategoryName(currentCategoryName);
  };

  const onCopy = () => setToClipboard(content[0]?.value);

  return (
    <View>
      <TouchableOpacity style={styles.container} onPress={onClick}>
        <View>{title ? <Text style={styles.title}>{title}</Text> : null}</View>
        {content?.map((item: ContentItem) => (
          <Text key={`${item.name}-${item.value}`} style={styles.text}>
            <Text style={styles.textCaption}>{item.name}:</Text> {item.value}
          </Text>
        ))}
      </TouchableOpacity>
      {showMenu ? (
        <View style={styles.menuContainer}>
          <Pressable
            hitSlop={30}
            onPress={handleOpen}
            style={pressed => (pressed ? styles.active : styles.inactive)}>
            <Icon
              style={styles.icon}
              name="ellipsis1"
              size={18}
              color={colors.black}
            />
          </Pressable>

          <BottomSheet
            ref={sheetRef}
            snapPoints={[450, 300, 0]}
            borderRadius={10}
            renderContent={() => (
              <Menu
                isFavorite={categoryName?.includes(content[0]?.value)}
                onCopy={onCopy}
                addToFavorite={addToFavorite}
                removeFromFavorite={removeFromFavorite}
                onClose={handleClose}
              />
            )}
          />
        </View>
      ) : null}
    </View>
  );
}```

[VictorioMolina]

@MahmonirB I think this issue is because this library doesn't support Reanimated 3. Lot of boilerplate from v1 (which was supported on v2) has been removed in reanimated v3. Not sure if this library still maintained (seems not to me), but if not, I am open, with the help of other community members, to start working on another library similar to this one, supporting last reanimated version. At this moment, seems to be impossible, for example, to make an app with new Shared Element Transitions of React Navigation 7 (which needs reanimated 3) and this repo.

If you would like to collaborate, this is my email: [email protected]

[vlack-coder]

@VictorioMolina any update on your library?