CODEWITHSUNDEEP
react-nativereact-native-vector-icons
Josh Winters
Josh Winters

Reputation: 855

react native vector icons showing X instead of icon

I cant seem to figure this out. I can get something to show, but its a box with an X in it, so im assuming its not picking up the vector icons. Any advice?

I have the show icon true, I have the tint color, I have the vector icons (i have tried both ionicons and font awesome, to no avail.

Code: 

import React, { Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react- 
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';

class HomeScreen extends Component {

    static navigationOptions = {
        title: 'Home'
    };

 render(){
     return (
         <View style={{ flex:1, alignItems:'center', justifyContent:'center' 
         }}>
             <Text>Home Screen</Text>
         </View>
     );
  }
  }

  const RootStack = createBottomTabNavigator(
      {
          Home: {
              screen: HomeScreen,
              navigationOptions: {
              tabBarLabel: 'Home',
              tabBarIcon: ({ tintColor }) => (
                  <Icon name = 'home' size={25} color={tintColor} />
              )
          }
      },
   },

   {
        tabBarOptions: {
        showIcon:true,
        tintColor:'red'
   }
  }
  );

  const AppContainer = createAppContainer(RootStack);

  const styles = StyleSheet.create({

 })

export default class App extends Component{
   render(){
   return <AppContainer />;
   }
}

Upvotes: 0

Views: 3389

Answers (3)

Pratik Gondaliya
Pratik Gondaliya

Reputation: 430

Solution:

  1. Open your android/app/build.gradle file.

  2. Add the following line inside the android block:

    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  1. Your android block should look something like this:
    android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.yourapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        // ...
    }
    // ...
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

  1. Save and close the android/app/build.gradle file.

  2. Open your terminal.

  3. Run the following command to link the vector icons package:

    npx react-native link react-native-vector-icons
  1. After linking the package, run the app on Android:
    npx react-native run-android

It worked for me, so I hope that if you follow this approach, it will work well for you as well.

Source: https://samtapes.medium.com/solve-icons-not-showing-up-react-native-vector-icons-78c312fcf692

Upvotes: 1

Rishabh Nigam
Rishabh Nigam

Reputation: 253

I am using react-native version 0.62 and I encountered this error too. Though 0.60+ versions of react native provide auto-linking feature, but for react-native-vector-icons this is an exception. You need to link it manually. To solve it, follow below steps

  1. rm -rf node_modules
  2. yarn
  3. yarn react-native link

Hope that helps.

Upvotes: 3

Josh Winters
Josh Winters

Reputation: 855

Fixed this. Once i realized it was the vectors, i just linked react-native with react-native-vectors.

Upvotes: 2

Related Questions