react native- vector-icons: change the name to simple text-CodePudding

I use react-native-vector-icons / Ionicons and i want to know If there a way to change Ionicon's name into simple text? For example, instead of name = "md-checkmark-circle-outline" So I want it to be just "abc" text

 <Ionicon
                style={{ justifyContent: 'center', alignItems: 'center' }}
                name="md-checkmark-circle-outline"
                size={30}
                color={selectedZoneIds.length > 0 || selectedGroupId != null ? "white" : 'grey'} />

CodePudding user response：

You can achieve that using a custom component and use the component to make the icons like this:

First you have to create an object with the name that you wants and the value for each key the real name from the library:

let create a new file called ionicIcons.js

  export const ionicIcons = {
   abc: 'md-checkmark-circle-outline'
}

import React from 'react';
import {Ionicon} from 'react-native-vector-icons';
import {ionicIcons} from './ionicIcons';

const CustomText = ({children, ...props}) => {

  return (
        <Ionicon name={ionicIcons[children]} size={30} {...props} />
    );

}

export default CustomText;

and you can use it like this:


 <CustomText  style={{ justifyContent: 'center', alignItems: 'center' }}  color={selectedZoneIds.length > 0 || selectedGroupId != null ? "white" : 'grey'}>abc</CustomText>