I’m having trouble interpolating a string into a source prop for the Image component in my React Native app. For reference all the images live locally in the app and I’m trying to generate a FlatList of this individual NovelItem component.

Here’s what my code looks like:

import { Image, Pressable, StyleSheet, Text, View } from "react-native";

import { GlobalStyles } from "../../constants/styles";

const NovelItem = ({
  id,
  title,
  authors,
  releaseDate,
  image,
  setSummaryModalOpen,
}) => {
  const imageString = `../../assets/images/covers/${image}`

  const renderAuthorNames = authors.map((author, index, arr) => {
    if (index !== arr.length - 1) {
      return <Text style={styles.authorName}>{author}, </Text>;
    }

    console.log(`COVER IMAGE:  ${imageString}`)

    return <Text style={styles.authorName}>{author}</Text>;
  });

  const summaryButtonHandler = () => {
    setSummaryModalOpen({ isOpen: true, novelId: id });
  };


  return (
    <View style={styles.container}>
      <View>
        <Image
          source={require(imageString)}
          style={styles.image}
        />
      </View>
      <View style={styles.infoSection}>
        <View style={styles.novelInfo}>
          <Text style={styles.title}>{title.toUpperCase()}</Text>
          <View style={styles.authorNames}>{renderAuthorNames}</View>
          <Text style={styles.releaseDate}>Released On: {releaseDate}</Text>
        </View>
        <View>
          <Pressable
            style={({ pressed }) => [pressed && styles.pressed]}
            onPress={summaryButtonHandler}
          >
            <Text style={styles.textButton}>View Summary</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
};

I’ve tried requiring each of the images in the local file like such:

require("../../assets/images/covers/SomeCover.jpeg")

I’ve tried using URI in the source like such:

         <Image
          source={{uri: imageString}}
          style={styles.image}
        />

These are non static images since they are pulled from the props but the actual images do live in the project locally.

This is the specific error I’m currently getting:

error: components/Novels/NovelItem.js: components/Novels/NovelItem.js:Invalid call at line 33: require(imageString)