Unknown named Module, using component will receive props to update an image

Question

Hi I am running into the error "Unknown named Module" when trying to dynamically update image using componentWillReceiveProps. Essentially I have a topics component which has a list of topics, when a topic is clicked it gives props to another component (thumbnails) and the images related to that topic are populated.

Here is some code for the thumbnails component:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Player from './player.js';
import styles from '../stylesheet.js';
let baseurl = '../assets/thumbnails/';
let extension = '.jpeg';
export default class Thumbnails extends Component {
  constructor(props){
    super(props);
    this.state = {
      current: [
        require('../assets/thumbnails/narcolepsy-1.jpeg'), 
        require('../assets/thumbnails/narcolepsy-2.jpeg'),
        require('../assets/thumbnails/narcolepsy-3.jpeg')
      ]
    }
  }
  componentWillReceiveProps(nextProps) {
    setTimeout(()=>{
      let topic = nextProps.current.toLowerCase();
      let current = [];
      for(let i = 1; i <= 3;i++){
        current.push(require(baseurl + topic + '-' + i + extension));
      }
      this.setState({current,})
    },1000)
  }
  render() {
    const thumbnails = this.state.current.map((path,i) => {
      return(<Image 
              source={path}
              style={styles["thumbnail"+(i+1)]}
              key={"thumbnail"+i} />);
      })
    return(
        <View style={{flexDirection:'row'}}>
          {thumbnails}
        </View>
    )
  }
}

I've found a similar question (React-native image - unknown named module '../img/2.jpeg') that says to use source={uri: 'file.extension'}; and to keep image assets in the folder android/app/src/main/res/drawable However I do not have an android folder, as I am using CRNA and Expo.io. Here is my project structure, please tell me what to do in this context:

App.js          app.json        my-app-key.keystore stylesheet.js
App.test.js     assets          node_modules        yarn.lock
README.md       components      package.json

Answer 1

Using dynamic require calls is not supported by the React Native packager. This is outlined in the docs: React Native - Images

In order for this to work, the image name in require has to be known statically.

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

I would suggest creating a static data structure to hold your images, such as an object like:

const images = {
  narcolepsy: [
    require('../assets/thumbnails/narcolepsy-1.jpeg'), 
    require('../assets/thumbnails/narcolepsy-2.jpeg'),
    require('../assets/thumbnails/narcolepsy-3.jpeg')
  ],
  apnea: [
    require('../assets/thumbnails/apnea-1.jpeg'), 
    require('../assets/thumbnails/apnea-2.jpeg'),
    require('../assets/thumbnails/apnea-3.jpeg')
  ]
};

This way, the packager can load your references up when the bundle is created.