Search code examples
react-nativeicons

Expo react native / always get same error, when trying to use icons


I want to add some icons to my app but I keep getting the same error.

I tried to add icons to my app, but always get the same error.

First I tried with @expo/vector-icons (npmjs.com), installed successfully, but got this error:

ERROR TypeError: Cannot read property 'isLoaded' of undefined

Here's the code:

import React from 'react';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const App = () => {

  return (
    <View>
      <Text>This is a test</Text>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  )
}

export default App;

I also tried to import differently:

import React from 'react';
import { View, Text } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

const App = () => {

  return (
    <View>
      <Text>This is a test</Text>
      <FontAwesome name="facebook" size={32} color="green" />
    </View>
  )
}

export default App;

Next I wanted to try to use the library react-native-vector-icons (npmjs.com), also installed successfully, but got the same error:

ERROR TypeError: Cannot read property 'isLoaded' of undefined

Here is the code: (used this tutorial)

import React from 'react';
import { View, Text } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

const App = () => {

  return (
    <View>
      <Text>This is a test</Text>
      <FontAwesomeIcon name="star-o" size={50} />
    </View>
  )
}

export default App;

Can anyone help?


Solution

  • Alright. Problem solved.

    Used wrong version for the library. It can be easyl change, by running this following command:

    npx expo install --fix