Transparent backgroundColor for an Image using React Native on Android

Question

I have an asset with transparent background being used on our app. While on iOS, setting backgroundColor: 'transparent' for the Image component works as expected, on Android, it always gets rendered with a light grey background.

In fact, backgroundColor value seems to be completely ignored on Android.

This is how it looks right now:

<View style={styles.cardHeader}>
  <Image
    source={require('../assets/images/greeting.png')}
    style={styles.greetingImage} />
</View>

Styles:

cardHeader: {
  alignSelf: 'stretch',
  backgroundColor: Color.GREY,
  paddingTop: 30,
  borderTopLeftRadius: 5,
  borderTopRightRadius: 5
},

greetingImage: {
  alignSelf: 'center',
  backgroundColor: 'transparent'
}

Answer 1

I realised that I was importing my Image component from shoutem-ui instead of react-native. This is why I was not being able to set a background color, which seems to be ignored by the former, but not the later. 😉

If you stumble on something similar, be sure you're importing the componentes from the right package:

import {Image} from 'react-native';

Answer 2

You can also add StyleSheet.absoluteFillObject to your container.

greetingImage: {
  ...StyleSheet.absoluteFillObject
  alignSelf: 'center',
  backgroundColor: 'transparent'
}