React Native Unexpected token '{'. import call expects exactly one argument - react-native

Question

Hello guys I'm new to React Native and I was going along with a tutorial on YouTube. There I imported heroicons as this is what I needed to do. Everything works fine until I import the actual Icons like this:
import { UserIcon, ChevronDownIcon, SearchIcon, AdjustmentsIcon, } from "react-native-heroicons/outline"
Then the error: Unexpected token '{'. import call expects exactly one argument. no stack comes up. Is there anyone who knows how I can solve this problem as everything I found so far didn't work.
My dependencies:
"dependencies": {
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/stack": "^6.2.2",
"expo": "~46.0.6",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-heroicons": "^2.2.0",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-svg": "12.3.0",
"react-navigation-stack": "^2.10.4",
"tailwindcss-react-native": "^1.7.10"
},
HomeScreen:
import { View, Text, SafeAreaView, StyleSheet, Platform, StatusBar, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { UserIcon, ChevronDownIcon, SearchIcon, AdjustmentsIcon, } from "react-native-heroicons/outline"
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [])
return (
<SafeAreaView style={styles.AndroidSafeArea}>
<Text className='text-red-500'>
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
uri: 'http://links.papareact.com/wru'
}}
className='h-7 w-7 bg-gray-300 p-4 rounded-full'
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now!
</Text>
<Text className="font-bold text-xl">
Current Location
<ChevronDownIcon size={20} color="#00CCBB"/>
</Text>
</View>
</View>
</Text>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
})
export default HomeScreen
Thank you for your help :)

Answer 1

I run into same issue if you run your app using expo start or npx expo start you should see that they are telling you where is the issue.
My issue was that react-native-svg version was hire then what expo was expected i just run expo doctor --fix-dependencies and it should fix the version of react-native-svg installed