What is the proper way conditionally require images assets with React Native and TypeScript? (getting eslint errors)

Using React Native 0.63 and Typescript 4.

I have an app with categories. Each category has an image that is stored as an asset with the code.

I tried this:

myImage = require(`${myImageName}.jpg`)

But eslint tells me:

Calls to require() should use string literals (eslintimport/no-dynamic-require)

So instead I did this:

In images/index.ts:

import vibrators = require('./vibrators.jpg'),import dildos = require('./dildos.jpg'),import clitoris = require('./clitoris.jpg'),import plugs = require('./plugs.jpg'),import rings = require('./rings.jpg'),import kits = require('./kits.jpg'),import men = require('./men.jpg'),import women = require('./men.jpg'),import couple = require('./couple.jpg'),import bondage = require('./bondage.jpg'),import furniture = require('./funiture.jpg'),import lingerie = require('./lingerie.jpg'),import games = require('./games.jpg'),const categories = {vibrators, dildos, plugs, rings, kits, men, women, couple, bondage, furniture, lingerie, games}export { categories, ... }

(Sorry, I'm tired of changing all names each time I post something about this app... ^-^')

In my component that prints categories images:

import React, { FC } from 'react'import { TouchableOpacity, Image } from 'react-native'import { useNavigation } from '@react-navigation/native'import { categories } from '../assets/images'interface Props {  category: string}const CategoryImage: FC<Props> = ({ category }) => {  const navigation = useNavigation()  return (<TouchableOpacity style={styles.container} onPress={() => navigation.navigate(category)}><Image source={categories[category]} style={styles.image} /></TouchableOpacity>  )}export default CategoryImage

But there again, on:

import vibrators = require('./vibrators.jpg'),

I have:

Require statement not part of import statement. (eslint@typescript-eslint/no-var-requires)