Image is not rendered when using borderRadius & resizeMode [Android][RN 0.46.2]

[Mindaugas-Jacionis]

Environment

• react-native: 0.46.2
• node: 6.9.1
• npm: 3.10.8
• yarn: 0.17.9
• Target Platform: Android
• Development Operating System: macOS Sierra v10.12.13

Steps to Reproduce

1. Create Image
2. Use resizeMode and borderRadius for styling of the image.

Expected Behavior

Image should be rounded and follow resize prop instructions('cover', 'contain', 'stretch', 'repeat', 'center').

Actual Behavior

Instead image simply isn't rendered. If you remove borderRadius or resizeMode. All works as intended.

Reproducible Demo

1. In terminal run react-native init testImg
2. open project in text editor and change index.android.js to the one below:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View, Image } from 'react-native';

export default class testImg extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.avatar}
          source={{uri: 'https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k.jpg'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  avatar: {
    width: 70,
    height: 70,
    borderRadius: 35,
    // resizeMode: Image.resizeMode.contain // uncomment to see the issue
  }
});

AppRegistry.registerComponent('testImg', () => testImg);

3. In project folder run react-native run-android, you will see working image, but if you uncomment resizeMode in the code - image won't render.

[ItsNoHax]

React-Native: 0.46.1 also has this issue

[nehvaleem]

also having exact same issue

[ismjt]

thanks god, you save my time! Is there any solution?

[datnguyen92]

I have the same issue on RN 0.46.4 as well, do we have plan to fix this?

[ekkucukarpaci]

I'm also having this issue, tested only on Android. borderRadius only seems to work when resizeMode is 'cover'. Maybe e0bdb7c could be related?

[wielrls]

Ditto. My workaround in the short term is to use borderRadius with resizeMode={'cover'}.

[rdixonbhw]

It appears to have been caused by this commit e0bdb7c

EDIT: Which has already been reverted in 0.47.

[rendomnet]

If you will use resizeMode: stretch then border radius will be deformed

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[shoppy999]

You don't reply to the issues, but wait them out and close due to inactivity. Brilliant strategy.

[rdixonbhw]

@shoppy999 This was fixed months ago in 0.47

[raynor85]

It seems like Images don't work well with the new border properties at all. borderTopWidth, borderTopColor and all the variants don't work at all.

[aligfl]

so was this fixed in RN >= 0.47?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.