cssreactjsreact-nativereact-native-vector-icons

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


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'} />

Solution

  • 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>