How to register image files to System.registerDynamic in react-native?

Question

In an <SectionList/> I am trying to add an Image source to the renderItems. Problem is that this error arises: Device: (1052:8812) Error: Module ../assets/filter-imgs/[email protected] not declared as a System.registerDynamic dependency of module://screens/ConsumerHome.js.js.

I suspect that this error is caused by the fact that react-native components cannot register any non-hardcoded (i.e this.props.img) image sources unless they are System.registerDynamic.

How can I System.reigsterDynamic image files?

Code:

// this is the structure the components are composed
class ProductDisplay extends React.Component {
  render() {
    return (
      <TouchableOpacity
        onPress={() => this.props.navigation.push("Product", {"data":this.props.data})}>
        <View style={styles.absoluteView}>
          <Text>{this.props.data.name}</Text>
        </View>
        <Image source={require(this.props.data.img)} />
      </TouchableOpacity>
    );
  }
}
class ConsumerHome extends React.component{
    <SectionList
  sections={[
    { title: 'Quick filters', data: filters },
    { title: 'Products', data: products }, //products is an object with a img attribute
  ]}
  renderItem={({ item, index, section }) => {
    if (section.title == 'Quick filters') {
      return (
        <QuickFilter
          style={styles.quickFilter}
          key={index}
          data={item}
        />
      );
    } else {
      return (
        <ProductDisplay
          style={styles.prodDisplay}
          key={index}
          data={item}
        />
      );
    }
  }}
}

Answer 1

Found the problem:

My problem was that the JSON data only included the image file path without the crucial require(), which I instead placed in the component.