CODEWITHSUNDEEP
react-nativevisual-studio-codeheroicons
Eased
Eased

Reputation: 1

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

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 :)

Upvotes: 0

Views: 806

Answers (1)

Moustafa Tlais
Moustafa Tlais

Reputation: 11

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

Upvotes: 0

Related Questions