I’m new in RN and try to build react native using expo app, and it need to render logo based on user currency, so first i have build this component to dynamicall import png files based on their name,
// the filesnames are match with the user currency

import React from 'react';
import { Image } from 'react-native';

interface CurrencyType {
  currency: string;
}

const CurrencyLogo: React.FC<{ currency: CurrencyType }> = ({ currency }) => {
  const logoFileName = `${currency}.png`;

  let imageSource = require(`../../assets/currency-icon/${logoFileName}`);

  return <Image source={imageSource} style={{ width: 100, height: 100 }} />;
};

export default CurrencyLogo;

and import it in my main screen but it got error like

Error: TransformError app/helpers/CurrencyLogo.tsx: app/helpers/CurrencyLogo.tsx:Invalid call at line 35: require(`../../assets/currency-icon/${logoFileName}`)]

Kinda stuck in this problem now,

I have tried to use Import as typescript suggested but i got another complicated error,
And another one solution in mind is creating index to export all the png, but got tackle by ts cause it was not a module, obviously it is png

is there something wrong with my component ?
Please help

Thank you in advance

ps. just in case i attach my package.json here text