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>
    );
  }

score 0 · Answer 1 · answered Feb 07 '21 at 22:41

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

you can make an exception like if route params contains image Object (image || default image) const imageURI = {uri: (this.props.route.params.image.uri || "https://i.stack.imgur.com/wt9CG.png")} if route params doesn't contains image Object then this will render this https://i.stack.imgur.com/wt9CG.png (image) — Cyber Punk, Feb 08 '21 at 00:55
I dont believe you read my full post. My uri is NOT null. This solution you provided would work for those who had a null uri. — , Feb 08 '21 at 14:32

Cyber Punk · Answer 2 · 2021-02-08T02:42:25.190

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

edited Feb 08 '21 at 02:42

answered Feb 08 '21 at 02:06

Cyber Punk

17
4

This solution will not work either. Not sure what you were trying to do. Adding another view on top of my background is not going to solve the fact that my ImageBackground is still white... – Feb 08 '21 at 14:44
I said View components which are wrapped inside ImageBackground, if child (view) component styling is { flex: 1, backgroundColor : 'white' } this will create an other white layer above the image – Cyber Punk Feb 08 '21 at 17:02
this happened to me once – Cyber Punk Feb 08 '21 at 17:26
There are no nested views. You can see in the OP what the view looks like. – Feb 08 '21 at 21:39
official doc works fine -> https://snack.expo.io/@purplecode/imagebackground , you should wrap the content thats it. for and for {// content } – Cyber Punk Feb 08 '21 at 22:48
If it was working fine, I wouldn't be posting about it. – Feb 10 '21 at 12:50

React Native ImageBackground showing white image only

2 Answers2