export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' #396
Description
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>
);
}```