React-native: How to avoid flickering when Image re-render ?

[leecade]

Is there something wrong?

Maybe I should do some cache first like image render with canvas?

Any help, thanks

[sahrens]

Are you changing the image URL? If so, then you can layer multiple images on top of each other with transparent backgrounds (and position: 'absolute') so the old image will remain visible until the new image loads on top of it. If you're not changing the URL, then I'm not sure why this would happen - what does your code look like?

[leecade]

hi, @sahrens

There is a example, maybe re-render by key cause flickering, not sure.

'use strict'

var React = require('react-native')
var {
  AppRegistry,
  ScrollView,
  View,
  Text,
  StyleSheet,
  Image,
} = React

var test = React.createClass({

  getInitialState() {
    return {
      i: 1
    }
  },

  componentDidMount() {
    var that = this
    setInterval(function () {
      that.setState({
        i: that.state.i + 1
      })
    }, 500)
  },

  render() {
    var content = <Image style={{width: 300, height: 300,}} source={{uri: 'https://tse1-mm.cn.bing.net/th?id=RlT8VmiyzVdVy5tpPgcU1bAlnhtSrwZb3vxI1r2lWH9Yg&w=272&h=272&c=7&rs=1&qlt=90&o=4&pid=1.9'}} />
    return (
      <ScrollView style={{marginTop: 100}} key={this.state.i}>
        <View>{content}</View>
      </ScrollView>
    )
  }
})

AppRegistry.registerComponent('swiper', () => test)

[sahrens]

Why are you changing the key? That could definitely cause flickering because it will bypass the react diffing algorithm and force the view to be destroyed and a fresh one replace it. Usually that will happen seamlessly within one frame, but it might not in all cases. If you're doing it to refresh scroll position, I'd recommend using something like this.refs.scrollView.scrollTo(0, 0)

On Apr 28, 2015, at 7:27 PM, 斯人 [email protected] wrote:

hi, @sahrens

There is a example, maybe re-render by key cause flickering, not sure.

'use strict'

var React = require('react-native')
var {
AppRegistry,
ScrollView,
View,
Text,
StyleSheet,
Image,
} = React

var test = React.createClass({

getInitialState() {
return {
i: 1
}
},

componentDidMount() {
var that = this
setInterval(function () {
that.setState({
i: that.state.i + 1
})
}, 500)
},

render() {
var content =
return (
{content}

)
}
})

AppRegistry.registerComponent('swiper', () => test)
―
Reply to this email directly or view it on GitHub.

[leecade]

thanks @sahrens I see, key cause a overall refresh

[nikhilgoswami]

I am using ImageBackground component on a login form and changing any state of form field or when the from receives props the image flickers, at first I thought it might be due to me using high resolution image but changing resolution did not solve the issue.

[MacKentoch]

I had flickering issues with Image.

I don't know why, but replacing source prop with defaultSource prop fixed it for me in iOS:

<Image
  style={styles.logoImage}
  resizeMethod="scale"
  resizeMode="contain"
  // source={Logo}
  defaultSource={Logo}
 />

But in Android there is no defaultSource, so I had to

• get back source prop
• changed resizeModeprop from contain to cover:

<Image
  style={styles.logoImage}
  resizeMethod="scale"
  resizeMode="cover"
  source={Logo}
  defaultSource={Logo} 
 />

[VolkRiot]

@MacKentoch Your solution worked perfectly for me developing an iOS Build.

[quantumproducer]

@MacKentoch what did you do for Android regarding "get back source prop"?

[GreenRidingHood]

@MacKentoch thank you so much, works like charm
(npm run ios > react ios app)

[GreenRidingHood]

@MacKentoch is that only solution for android, I mean defaultSource not supported at android, can I use "... platform" thing if android source, if ios defaultSource or something like that :D