Why does the name of the Ionicons component in the react-native-vector-icons/Ionicons library not take effect?

[Qy742698]

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Block, Accordion } from 'galio-framework';
import Ionicons from 'react-native-vector-icons/Ionicons'; 
const AccordionDemo = () => {
    const data = [
        { title: "1nd Chapter", content: "Lorem ipsum dolor sit amet" },
        { title: "2nd Chapter", content: "Lorem ipsum dolor sit amet" },
        { title: "3rd Chapter", content: "Lorem ipsum dolor sit amet" }
    ];
    return (
        <View style={styles.container}>
            <Accordion 
            dataArray={data} 
            style={styles.accordion}
            opened={0}
            listStyle={styles.listStyle}
             icon={<Ionicons
                 name="albums"
                 size={20}
                 color="blue"
              >
            </Ionicons>}
            />
        </View>

    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    accordion: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        overflow: 'hidden',
        // backgroundColor:'red'
    },
    listStyle: {
        borderTopWidth: 10,
        borderTopColor: 'red',
        // backgroundColor:'red'
    },
    headerStyle: {
        backgroundColor: '#5E72E4',
        padding: 10,
    },
    contentStyle: {
        paddingVertical: 10,
        paddingHorizontal: 20,
    },
});
export default AccordionDemo

[johnf]

@Qy742698 What do you mean by "does not take effect"? What happens when you use this code?

[Qy742698]

@johnf The icon is not displayed. Instead, a question mark (?) is displayed.

[1421393078]

需要加把这一行 apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") 加在 android/app/build.gradle。文档里有写的， 我也踩了这个坑

[Qy742698]

@1421393078 如果是在harmony上面，好像不生效

[raazatul7]

same here, in iOS/Android it's showing a question mark instead of an icon after updating to 10.1.0 and in version 9.2.0 and rn-version 0.74 throwing error

[johnf]

@Qy742698 Are you seeing this issue on iOS, Android or both?

If this is a new project can I suggest trying our yet to be released multi-package version https://github.com/oblador/react-native-vector-icons/tree/monorepo it is much simpler to set up.

[GuilhermeSantosPlank]

I'm getting the same issue running on iOS. Only the Ionicons are not displaying. I got this after upgrading from version "^9.2.0" to "^10.1.0" and before that, it was working well.

[juliesaia-vendora]

Ionicons was updated in v10, if you had an existing project you have to replace your Ionicons.ttf

https://github.com/oblador/react-native-vector-icons/pull/1484

[johnf]

@Qy742698 Is this still an issue?

[johnf]

Since there has been no update in a while, I'm closing this for now. Feel free to comment, and I'll reopen.