'icon' prop must be a string literal

[pee0803]

Hi, I would like to ask is there any way to insert dynamic value in 'icon' prop? I have my code like image shown below.

Your advice is appreciated. Thanks in advance.

[oktaysenkan]

Here an example code, i suggest you check ts-pattern.

import { View, Text } from 'react-native';
import React, { useCallback } from 'react';
import { Iconify } from 'react-native-iconify';

const objects = [
  {
    title: 'Bag',
    icon: 'mdi:bag-personal',
  },
  {
    title: 'Ball',
    icon: 'material-symbols:sports-basketball',
  },
  {
    title: 'Computer',
    icon: 'mi:computer',
  },
];

const Example = () => {
  const renderIcon = useCallback(
    (props: { icon?: string; size?: number; color?: string }) => {
      switch (props.icon) {
        case 'mdi:bag-personal':
          return <Iconify {...props} icon="mdi:bag-personal" />;

        case 'material-symbols:sports-basketball':
          return (
            <Iconify {...props} icon="material-symbols:sports-basketball" />
          );

        case 'mi:computer':
          return <Iconify {...props} icon="mi:computer" />;

        default:
          return <Iconify {...props} icon="material-symbols:question-mark" />;
      }
    },
    []
  );

  return (
    <View>
      {objects.map((object) => (
        <View
          style={{
            gap: 4,
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {renderIcon({
            icon: object.icon,
            size: 32,
            color: '#000',
          })}

          <Text
            style={{
              fontSize: 16,
              fontWeight: '500',
              color: '#000',
            }}
          >
            {object.title}
          </Text>
        </View>
      ))}
    </View>
  );
};

export default Example;

[oktaysenkan]

for static data

import { View, Text } from 'react-native';
import React from 'react';
import { Iconify } from 'react-native-iconify';

const defaultProps = {
  color: '#000',
  size: 32,
};

const objects = [
  {
    title: 'Bag',
    icon: <Iconify icon="mdi:bag-personal" {...defaultProps} />,
  },
  {
    title: 'Ball',
    icon: (
      <Iconify icon="material-symbols:sports-basketball" {...defaultProps} />
    ),
  },
  {
    title: 'Computer',
    icon: <Iconify icon="mi:computer" {...defaultProps} />,
  },
];

const Example = () => {
  return (
    <View>
      {objects.map((object) => (
        <View
          style={{
            gap: 4,
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {object.icon}

          <Text
            style={{
              fontSize: 16,
              fontWeight: '500',
              color: '#000',
            }}
          >
            {object.title}
          </Text>
        </View>
      ))}
    </View>
  );
};

export default Example;