You can’t change parent opacity without affecting child, so you should have absolute positioned background. For proper child positioning, you should add an additional container. Check out this snack: snack.expo.io/SkaHLjzr8

...
<View style={styles.container}>
  <View style={styles.card} >
    <View style={styles.background} />
     <View style={styles.imageContainer}>
      <Image style={styles.image} source="..." />
    </View>
  </View>
</View>
...

...
container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'blue',
    opacity: .5,
    zIndex: 1,
  },
  card: {
    height: 400,
  },
  imageContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2,
    opacity: 0.8,
  },
  image: {
    width: 200,
    height: 200
  }
...