require() not displaying for local images React Native - node.js

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}> [phone] </Text>
<Button title = 'Call this number' onPress = {() => this.goToURL("tel:[phone]", "Your device doesn't support phone calls")}/>
</View>
<View style= {[styles.container,{flexDirection: 'row', height: 50}]}>
<Text style = {styles.subtext}> [phone] </Text>
<Button title = 'Call this number' onPress = {() => this.goToURL("tel:[phone]", "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.

Answer 1

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.

Answer 2

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}}
/>