Unable to locate image file in React Native Expo app?

You are using Expo in React Native, so it means images need to be loaded a little differently than the method you are using. Your current attempt to load the image files directly from a relative path does not work because the bundler does not know to include them.

The require function is typically used to import images in React Native because it can dynamically bundle these assets. So, you should change your image import as shown in the following code:

const stories = [
    require('./assets/story1.jpg'), 
    require('./assets/story2.jpg'), 
    require('./assets/story3.jpg'), 
    require('./assets/story4.jpg'), 
    require('./assets/story1.jpg'), 
    require('./assets/story1.jpg')
];

const StoriesView = ({ stories }) => {
    return (
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
            <View style={styles.storiesContainer}>
                {stories.map((source, index) => (
                    <Image
                        key={index}
                        style={styles.storyImage}
                        source={source}
                    />
                ))}
            </View>
        </ScrollView>
    );
};

You can see require, used to import each image file from your local assets. These are then passed to the Image component’s source prop directly instead of using a string URI.

But understand this method will not be able to load image names dynamically, because require statements are handled at bundle-time, before the app has started running. The file paths are evaluated and the images are loaded into the app’s bundle, meaning that they need to be explicitly defined first.

The require function does not support dynamic image imports. When your app’s bundle is being built, the bundler needs to know about all the assets it should include. If you use a dynamic expression, like require('./assets/' + name), the bundler does not know to include the image because it does not know the value of name ahead of time.

Here is an example of what you might do instead:

import React, { Component } from 'react';
import { Image, StyleSheet, AppRegistry } from 'react-native';

const images = {
  story1: require('./assets/story1.jpg'),
  story2: require('./assets/story2.jpg'),
  story3: require('./assets/story3.jpg'),
  // add more images as needed
};

const ImageWithRequire = ({ name }) => {
  const image = images[name];

  return (
    <Image
      key={name}
      style={styles.storyImage}
      source={image}
    />
  );
};

const styles = StyleSheet.create({
  storyImage: {
    width: 100,
    height: 100,
  },
});

AppRegistry.registerComponent('ImageWithRequire', () => ImageWithRequire);

With const images, all possible images are required upfront and stored.
You can then use the name prop to select the right image from the images object. That allows you to determine the image to display at runtime while still including all possible images in the app’s bundle.

Example: <ImageWithRequire name="story1" />