Question 199377 in React native Question posted in
The official React Native documentation can be found here.

React native – Icon not showing in React.js

Icons not showing in React Native JS.
I check all of the codes but I can’t find any problem.
When I run it in Android, the Icon not showing

Please help me to find the problems so the Icon can showing in my Android 🙂

import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {Icon} from 'react-native-elements';

const ContactListScreen = (props) => {
 return (
 <View style={styles.buttonView}>
        <TouchableOpacity
          style={styles.addButton}>
          <Icon name="plus" type="antdesign" size={24} color="black" />
        </TouchableOpacity>
 </View>
 );
};

export default ContactListScreen;
Tags:

2

Answers


  1. 0

    Chessy.

    I think there are some errors in your code.
    There’s no render() method in your jsx/js file.

    import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {Icon} from 'react-native-elements';

export const MyComponent = () => {
    return {
        <View style={styles.buttonView}>
            <TouchableOpacity
              style={styles.addButton}>
              <Icon name="plus" type="antdesign" size={24} color="black" />
            </TouchableOpacity>
        </View>
    }
}

    If this is not problem, then please read below once.

    There are a few potential reasons why the icons may not be showing in your React Native app on Android. Here are some troubleshooting steps you can try:

    1. Verify that you have installed the necessary dependencies for using icons in React Native. In this case, you are using the react-native-elements library, so make sure you have installed it correctly by running npm install react-native-elements .
    2. Check if you have linked the library to your project. Run react-native link react-native-elements to ensure proper linking.
    3. Ensure that the necessary font files are included in your Android project. Some icon libraries require font files to be manually added to the Android project. Check the documentation for react-native-elements or the specific icon library you are using to see if this step is required.
    4. Verify that the icon name and type are correct. Double-check the name and type props passed to the Icon component. Make sure the icon name matches the available icons from the chosen icon library. Also, ensure that the specified type is supported by the library.
    5. Check if the icon color is set correctly. In your code, the icon color is set to "black". Ensure that the color is visible against the background color of the button or container.
    6. Inspect the layout and styling of the parent components. Make sure that the button and its parent components have the correct dimensions and styles to display the icon properly. Check if there are any overlapping or conflicting styles that might be affecting the visibility of the icon.
    7. Test on a physical device or emulator. Sometimes, icons may not display correctly on certain emulators or devices due to compatibility issues. Try running the app on a physical device or different emulator to see if the issue persists.
      By following these steps, you should be able to identify and resolve the issue causing the icons to not show up in your React Native app on Android.

    Hope this would help you.
    David.

    Login or Signup to reply.
  2. 0

    for icons react-native-elements depend on a library react-native-vector-icons

    you have to follow the installation guide for react native vector icons mentioned in the documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search