图片超出边界，在Android设备上不显示

Question

Hi I am trying move logo out of borders for IOS it works fine but Android have a problem the logo is covered by view on background. I am tried to set up background color to transparent but doesn't work. Any idea how to solvate it?

and here is my code:

const styles = StyleSheet.create({
  wallWrapper: {
    backgroundColor: '#00000000',
    borderWidth: 1,
    borderColor: 'green',
    paddingTop: 40,

  },
  wallImageBorderEffect: {
    borderWidth: 1,
    borderColor: 'red',
    flex: 1,
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
    height: 30,
    backgroundColor: 'gray',
  },
});

...

  render() {
    return (
      <View style={styles.wallWrapper}>
        <View style={styles.wallImageBorderEffect}>
          <Image
            style={{
              height: 45,
              width: 105,
              position: 'absolute',
              bottom: 6,
              overflow: 'hidden',
            }}
            resizeMode="cover"

            source={require('./images/mock-logo.png')}
          />
        </View>
        <View style={{
          flex: 1,
          justifyContent: 'center',
          flexDirection: 'column',
          alignItems: 'center',
          height: 400,
        }}>
        </View>
      </View>
    );
  }
}

Answer 1

This is a known issue on Android. The overflow attribute is not supported on Android yet (only on iOS).

But you can support the feature request here .

You could maybe try to move your <Image /> component outside of the <View /> and fix the position by adjusting top props.