[Image] Does not fade in on Android unless borderRadius is set

[brentvatne]

See example gifv here

'use strict';

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

class AndroidImageFadeTest extends Component {
  render() {
    let reactImage = (
      <Image
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        fadeDuration={5000}
        style={styles.image} />
    );

    let catImage = (
      <Image
        source={{uri: 'https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg'}}
        fadeDuration={5000}
        style={[styles.image, {borderRadius: 1}]} />
    );

    return (
      <View style={styles.container}>
        <View style={{flexDirection: 'row'}}>
          {reactImage}
          {reactImage}
          {reactImage}
        </View>

        <View style={{flexDirection: 'row'}}>
          {catImage}
          {catImage}
          {catImage}
        </View>

        <View style={{flexDirection: 'row'}}>
          {reactImage}
          {reactImage}
          {reactImage}
        </View>

        <View style={{flexDirection: 'row'}}>
          {catImage}
          {catImage}
          {catImage}
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 100,
    height: 100,
  },
});

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

[brentvatne]

cc @balazsbalazs @mkonicek

[facebook-github-bot]

Hey brentvatne, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[mkonicek]

Wow good find! I know little about the implementation, here it is: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.java

Maybe Fresco does some special casing. Pinged the Fresco oncall.

[balazsbalazs]

The one thing that stands out is that we're not making the view dirty. I don't know much about ReactNative so not sure when the setters are called but it seems that unless we mark something as dirty the settings won't be applied.
Eg. look at the ReactImageView.setFadeDuration

@mkonicek happy to pair with you on this but it seems that the problem is in ReactImageView

[mkonicek]

@brentvatne does looking at ReactImageView.setFadeDuration help?

[brentvatne]

@mkonicek - I tried setting that manually and it didn't have any impact, the only way it fades is if I set borderRadius specifically

[mkonicek]

I'll try to find some time to look into it.

[odino]

BTW same thing happens when the image has some content ie.

        <Image fadeDuration={200} style={[styles.bgImage, {borderRadius: 1}]} source={someImage} >
          <View>
             ...
          </View>
        </Image>

[mkonicek]

Ah, I didn't get to this. @brentvatne do you remember if we found a solution?

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.