Error loading local image

[mahdiG]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

1. react-native -v: command not found
2. node -v: v7.9.0
3. npm -v: 4.2.0
4. yarn --version: 1.0.2

Then, specify:

• Target Platform: Android and iOS

• Development Operating System: Debian 9.1

• Build tools: Running app in Expo

Steps to Reproduce

(Write your steps here:)

1. Create project with CRNA
2. Run app in Expo
3. Create a method with a path argument
4. load image using source(path) in that method
5. Declare that method and give it a local path to an image

Expected Behavior

Image should load

Actual Behavior

Image doesn't load and expo gives warning:

Possible Unhandled promise rejection (id:0):
Error: Unknown named module: 'image.jpg'
_require@http://192.168.1.113:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:46:22
makeCard@http://192.168.1.113:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:113251:36
render@http://192.168.1.113:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:113288:30
http://192.168.1.113:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:26349:31

(Write what happened. Add screenshots!)

Reproducible Demo

This code works:

import React, {Component} from 'react'
import {Image, ScrollView, StyleSheet, Text} from 'react-native'


export default class Catagory extends Component {
    makeCard(text) {

        return (

            <Image source={require("./image.jpg")}>
                <Text>{text}</Text>
            </Image>

        )
    }

    render() {

        return (
            <ScrollView contentContainerStyle={styles.container}>
                {this.makeCard("Animation")}
            </ScrollView>
        )
    }
}

But this one gives error:

import React, {Component} from 'react'
import {Image, ScrollView, StyleSheet, Text} from 'react-native'


export default class Catagory extends Component {
    makeCard(text , path) {

        return (

            <Image source={require(path)}>
                <Text>{text}</Text>
            </Image>

        )
    }

    render() {

        return (
            <ScrollView contentContainerStyle={styles.container}>
                {this.makeCard("Animation" , "./image.jpg")}
            </ScrollView>
        )
    }
}

I simplified the code by removing the styling...

[chirag04]

static images should be required statically for the packager to correctly bundle them(your first case). RN does not support dynamic require of assets or modules like that since there is not way for the package to know which files to include in the bundle unless we support a way to explicitly pass a list of such assets to the packager . this a client environment which is not the same as nodejs environment.

Refer this document for some good vs bad patterns: https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/docs/Images.md