I want to use the Emotion component on not only one screen but on several screens, intending to display it with different sizes depending on the specific screen. To achieve this, I’m passing a string value as a prop to determine the size for the screen I want to use it on. In the dayComponent component, I import the Emotion component and implement it to set the width to 8 when the size prop is set to the string value small. However, the styling is not being applied. I would like to know why the image size is not changing.

This is Code:

Emotion Component

interface EmotionProps {
  data: MoodType;
  size?: string; // small, medium, large
}

const Emotion: FC<EmotionProps> = ({data, size}) => {
  // Logic
  const sizeList = [
    {
      size: 'small',
      width: '8',
    },
    {
      size: 'medium',
      width: '16',
    },
    {
      size: 'large',
      width: '24',
    },
  ];

  const getEmotionImage = (name: string) => {
    switch (name) {
      case 'annoying':
        return require('../public/images/annoying.png');
      case 'tired':
        return require('../public/images/tired.png');
      case 'depressed':
        return require('../public/images/depressed.png');
      case 'happy':
        return require('../public/images/happy.png');
      case 'nervous':
        return require('../public/images/nervous.png');
      case 'pain':
        return require('../public/images/pain.png');
      case 'relaxed':
        return require('../public/images/relaxed.png');
      case 'sad':
        return require('../public/images/sad.png');
    }
  };

  // View
  return (
    <View
      className={`p-1 w-${
        size ? sizeList.find(item => item.size === size)?.width : 'fit'
      } mx-auto text-center`}>
      <Image
        resizeMode="contain"
        source={getEmotionImage(data.name)}
        alt={data.name}
      />
    </View>
  );
};

export default Emotion;

dayComponent Component

interface dayComponentProps {
  date: DateData | undefined;
}

const dayComponent: FC<dayComponentProps> = ({date}) => {
  // Logic
  const diaryList = useRecoilValue(diaryListState);
  const year = date?.year;
  const month = date?.month;
  const day = date?.day;

  const resultDate = totalDate(year!!, month!!, day!!);
  const existDate = diaryList.find(
    diary => diary.date.totalDate === resultDate,
  );

  const isSelected = !!existDate;
  console.log('????a : isExistDate ==> ', existDate);

  // View
  return (
    <View className="flex-1">
      <View className="flex-1">
        <TouchableOpacity>
          <Text className="text-black">{date?.day}</Text>
        </TouchableOpacity>
      </View>
      {isSelected && (
        <View className="flex-1">
          <Emotion data={existDate?.mood} size={'small'} />
        </View>
      )}
    </View>
  );
};

export default dayComponent;

This is ScreenShot:
enter image description here