React Native ImageBackground showing white image only

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

• 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>

Answer 2

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