Skip to content

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

@Mindaugas-Jacionis

Description

@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);
  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions