React Native ImageBackground showing white image only - ios

Question

My ImageBackground module is only showing a white background. The code shown is basically a boilerplate template from React's official documentation on ImageBackgrounds. My uri is not null. "props.route.params.image" is type TakePictureResponse from react-native-camera module.
I look at similar questions to this one, the solutions to theirs were already implemented in mine.
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
}
})
render() {
return (
<View style={styles.container}>
<ImageBackground
source={{uri: this.props.route.params.image.uri}}
style={styles.image}
/>
</View>
);
}

Answer 1

You should mention height and width for image Styling and wrap the content inside ImageBackground (just use ImageBackground like a View Component)
image: {
resizeMode: 'cover',
justifyContent: 'center',
width:'100%',
height:'100%'
}
// Example
// App.js
import React from 'react';
import { StyleSheet, Text, View, ImageBackground} from 'react-native';
export default function App() {
const imageUrl = 'https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
return (
<View style={styles.container}>
<ImageBackground
source={{uri: imageUrl}}
style={styles.image}
>
<Text
style={{userSelect:'text',color: '#fff', fontWeight:'bold', fontSize:32, marginTop: 180}}>{'My Text Element'}</Text>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
image: {
resizeMode: 'cover',
justifyContent:'flex-start',
alignItems:'center',
width:'100%',
height:'100%'
}
})
output

Answer 2

make sure { backgroundColor: undefined } for the View components inside the ImageBackground
if {backgroundColor: '#fff'} then the white layer will cover the background image
<ImageBackground
source={{uri: imageUrl}}
style={styles.image}
>
<View style={{
// (eliminate 'white' layers)
backgroundColor: undefined,
width:'100%', height:'100%', alignItems:'center'}}>
<Text style={{ color: '#fff',fontWeight:'bold',
fontSize:32, marginTop: 180}}> {'My Text Element'}
</Text>
</View>
</ImageBackground>