TouchableHighlight and TouchableOpacity get highlighted on render()

Question

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>
    );
}

Just a shot in the dark but are you accidentally calling `onPress` instead of assigning it? E.g.`onPress = {this._onPressStart}` vs `onPress = {this._onPressStart()}` — G0dsquad, Feb 17 '17 at 14:50
you cant use second approach because onPress will be invoked on first render. You have to use `onPress = {() => this._onPressStart()} ` — Wojtek Szafraniec, Feb 17 '17 at 15:27
No, neither fixes it. @G0dsquad, how can you do that if you need to access `this`? @WojtekSzafraniec this does not fix it either — bloppit, Feb 17 '17 at 19:23
Sorry yes you're right. I tried to immediately edit by comment then I forgot. — bloppit, Feb 18 '17 at 12:00
I am not calling the function instead of assigning it, as you all suspect. So that is not the problem. The function is also called correctly and state is updated correctly upon touching and releasing. The only strange thing is, at the buttons graphically "blink" or animate opacity upon re-renders, as if the css is animating or something. — sune, Feb 18 '17 at 20:48

score 8 · Answer 1 · answered Jul 12 '18 at 12:17

8

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

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

answered Jul 12 '18 at 12:17

krish

3,856
2
24
28

score 0 · Answer 2 · answered Feb 20 '17 at 15:09

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.

score 0 · Answer 3 · answered May 01 '17 at 07:34

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'})
              });
            }}
          >

TouchableHighlight and TouchableOpacity get highlighted on render()

3 Answers3