CODEWITHSUNDEEP
react-nativetouchableopacitytouchablehighlight
sune
sune

Reputation: 171

TouchableHighlight and TouchableOpacity get highlighted on render()

I experience a behaviour where TouchableHighlight and TouchableOpacity reacts visually upon render (onPress is not being called).

One thing is that it looks just a little strange, when I enter the page and my button make a small "blink". This is strange but tolerable. The more frustrating part is that if I alter state for the parent component and thus invoke a re-render(), the button will "blink" again, making all buttons blink whenever I alter state.

Pushing the buttons alters page state, and thus pushing a button makes both buttons "blink".

I use react-redux, but this should not affect this behaviour.

The code below is just for illustration.

render()
{
    return(
        <View>
            <ToucableHightlight> //Click here changes state
                <Content/>
            </ToucableHightlight>
            <ToucableHightlight>  //Click here changes state
                <Content/>
            </ToucableHightlight>
        <View>
    );
}

Upvotes: 3

Views: 4309

Answers (3)

krish
krish

Reputation: 4112

Add activeOpacity in TouchableOpacity and it will force to not blink.

<TouchableOpacity style={styles.opecity} activeOpacity={1}>

Upvotes: 8

thomasttvo
thomasttvo

Reputation: 33

Not sure if it's because I'm running a later version, but I found this blinking behavior happens only on the first click.

My solution was putting the code that triggers rerendering in a setTimeout 

         <TouchableOpacity
            onPress={function() {
              setTimeout(function() {
                _this.setState({myState: 'someValue'})
              });
            }}
          >

Upvotes: 0

sune
sune

Reputation: 171

I solved the problem. Earlier during my render function i defined the "Content"-components, resulting in new (but alike) components being defined during each update. Placing the definitions of "Content" outside of the render function fixed it, so that the components no longer flashes when the page is re-rendered.

This explains why my component was rendered as a new component upon each render in the parent component, but it does not explain why a TouchableHighlight blinks during its initial render.

Buttons blinking during initial render is acceptable to me - buttons blinking upon any state-change is not.

So I am sufficiently happy now.

Upvotes: 0

Related Questions