when its changed source of any image in component there is blinking occurs which I try to avoid.
To do so I searched and decided to use ref(direct manipulation)
but it doenst change anything, so I use traditional way, changing url property in the state, it works but blink occurs.
Changing image source, fired when image started to move;("onPanResponderStart") function. here is code;
onPanResponderStart:(e, gesture)=>{
//not change image!
// this.refs['refTabure'].setNativeProps({
// source: require('../newImage.png')
// });
//it works, but blink occurs
this.setState({tabureSagImageUrl:require('../newImage.png')})
},
...
return (
<View style={styles.TabureStyle}>
<Animated.Image ref="refTabure" style={[panStyle, styles[this.props.Name], {opacity:this.state.opacity}]}
{...this.panResponder.panHandlers}
source={this.state.tabureSagImageUrl}>
</Animated.Image>
</View>
);
how can I edit the source of image without rerendering component that cause blinking ?