3

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 ?

TyForHelpDude
  • 4,828
  • 10
  • 48
  • 96

0 Answers0