require() not displaying for local images React Native

Question

I'm using React Native 0.54.0-rc.3, and that means that I'm of a recent enough version to load local static images using the require=() statement. I've tried doing it for my react-native app, but the images are not showing, and I'm not sure why.

Most if the issues I found online were not helpful, as they were either new to the concept of the require statement or they had syntax errors. There other errors seemed unrelated to me.

Here's an exact look at my code:

        <Image resizeMethod = "resize" source={require('../../images/ssnit_logo_high_def.png')} style = {{width: 200, height: 200}} />
        <Text style = {styles.title}> About SSNIT </Text>
        <Button title = 'Visit our Website' onPress = {() => this.goToURL("https://www.ssnit.org.gh", "Your device doesn't support internet browsing")}/>


        <View style= {[styles.container,{flexDirection: 'row', height: 60}]} >

            <SocialIcon style = {{margin: 5}}
                light
                type='envelope'
                onPress = {() => this.goToURL('mailto:contactcentre@ssnit.org.gh', "Your device doesn't seem to support email")}
            />

            <SocialIcon
                light
                type='facebook'
                onPress = {() => this.goToURL('https://www.facebook.com/ssnitghana', "Your device doesn't seem to support internet browsing")}
            />

            <SocialIcon
                light
                type='twitter'
                onPress = {() => this.goToURL('https://twitter.com/ssnitghana?lang=en', "Your device doesn't seem to support internert browning")}
            />
        </View>

        <Text style = {styles.paragraph}> Contact Credientials </Text>

        <View style= {[styles.container,{flexDirection: 'row', height: 50}]}>
            <Text style = {styles.subtext}> +233 302 611 622 </Text>
            <Button title = 'Call this number' onPress = {() => this.goToURL("tel:+233302611622", "Your device doesn't support phone calls")}/>
        </View>

        <View style= {[styles.container,{flexDirection: 'row', height: 50}]}>
            <Text style = {styles.subtext}> +233 800 1100 94 </Text>
            <Button title = 'Call this number' onPress = {() => this.goToURL("tel:+233800110094", "Your device doesn't support phone calls")}/>
        </View>

        <Text style = {styles.subtext}> contactcentre@ssnit.org.gh </Text>

        <Text style = {styles.paragraph}> More About Us </Text>

        {this.state.pages.map(info =>
            <TouchableOpacity key = {info.pageName} style ={styles.informationCells} onPress = {() => this.props.navigation.navigate(info.pageName)}>
                <Text style = {[styles.paragraph, {color: "#007AFF", fontWeight: "bold"}]}> {info.title} </Text>
                <Image source={require("../../images/navigation_arrow.png")} style = {{width: 100, height: 100}} resizeMode="contain" />
            </TouchableOpacity>
            )}


      </ScrollView>

React Native can definitely knows that such a file exists (since entering a non-existent path leads to an error), and space has been made for the image, but it's simple blank. This is the issue for both image components.

Has anyone else had an issue like this? Some help would be appreciated.

Can you please post more code where you place image? Or anything else? — tuledev, May 15 '18 at 02:53
@anhtu I've added the more code surrounding the Image component, but I'm not so sure how this would help. The problem seems pretty independent from the layouts surrounding it. — Andy, May 15 '18 at 09:45
I never found a solution, just a work around. I had to bundle the app through command line before I tested it on a emulator for the images to show. — Andy, Jun 27 '19 at 15:47
@MainManAndy, what do you mean you hand to bundle the app through command line? I am facing the same issue right now and a workaround can be considered an answer. Let me know or paste your solution regardless if its a workaround, it could help many others like me and thanks. — Daniel, Jun 27 '19 at 15:55
@MainManAndy, that workaround you used was the problem only on android? How did it work for `ios`? And thank you. — Daniel, Jun 27 '19 at 17:05
@Daniel unfortunately I don’t have an iOS solution. Sorry. — Andy, Jun 27 '19 at 17:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195646/discussion-between-daniel-and-main-man-andy). — Daniel, Jun 27 '19 at 17:08

score 0 · Accepted Answer · answered Jun 27 '19 at 16:05

So, I managed to find a workaround. It turns out that the images will show on the emulator if you bundle the app through the terminal before launching it on the emulator. Strangely, bundling also happened to be the solution to a problem that prevented me from running the app on a real Android device, so the problems might be related.

Anyway, to learn how to bundle, look at this StackOverflow answer. Info can also be found on this GitHub issue.

score 0 · Answer 2 · edited Aug 06 '21 at 13:59

0

I had an issue like this, The require() method was actually returning an object with the source for the picture inside of the default value. If it is the same problem, you can try this:

<Image 
   resizeMethod="resize"
   source={require('../../images/ssnit_logo_high_def.png').default} 
   style={{width: 200, height: 200}}
/>

edited Aug 06 '21 at 13:59

Luis Paulo Pinto

5,578
4
21
35

answered Aug 05 '21 at 22:21

Virginia Rabello

1

require() not displaying for local images React Native

2 Answers2