Multiple TouchableHighlights next to each other does not work!!!

  1. SDK Version: 35.0.0
  2. Platforms(Android/iOS/web/all): all

Hello everyone, I have previously posted 3 more questions on this forum and received zero answers. I am starting to lose hope :smiley: If there is something wrong with the way I post my questions, please tell me :smiley:

Now, to the main question, I am trying to use 3 TouchableHighlights at the bottom of my app. However when I try the app on an iPhone, and try to press one of these TouchableHighlights, it only activates the TouchableHighlight on the very right side. It does not matter which one I press, it always activates the one on the right. This problem does not happen in an android phone. Are there any of you that have encountered the same problem? If you know any solution to this problem please share it with me.

Is there anyone with the same issue?

If you can post some of your code that may help people to see where problems might be :slightly_smiling_face:

The render method of my component can be seen below. Thanks for the advice :+1:


    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'row' }}>
                <View style= {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <TouchableHighlight
                        style={ audioButton.primary }
                        underlayColor={ "#555555" }
                        onPressIn={this._playWhistleSound}
                        onPressOut={this._stopWhistleSound}>
                            <View style={{ flex: 1 }}>
                            <Image 
                                style={{ flex: 1, resizeMode: 'contain' }}
                                source={ images.whisle_emoji.uri }/>
                            </View>
                    </TouchableHighlight>
                </View>
                <View style= {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <TouchableHighlight
                        style={ audioButton.primary }
                        underlayColor={ "#555555" }
                        onPressIn={this._playApplauseSound}
                        onPressOut={this._stopApplauseSound}>
                            <View style={{ flex: 1 }}>
                            <Image 
                                style={{ flex: 1, resizeMode: 'contain' }}
                                source={ images.clapping_emoji.uri }/>
                            </View>
                    </TouchableHighlight>
                </View>
                <View style= {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <TouchableHighlight
                        style={ audioButton.primary }
                        underlayColor={ "#555555" }
                        onPressIn={this._playBooSound}
                        onPressOut={this._stopBooSound}>
                            <View style={{ flex: 1 }}>
                            <Image
                                
                                style={{ flex: 1, resizeMode: 'contain' }}
                                source={images.angry_emoji.uri}/>
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }```

I feel like there might be too many Views, you could try removing some like this:

> <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}
>                 <View style= {{ flex: 1, flexDirection: 'row' , alignItems: 'center', justifyContent: 'center' }}>
>                     <TouchableHighlight
>                         style={ audioButton.primary }
>                         underlayColor={ "#555555" }
>                         onPressIn={this._playWhistleSound}
>                         onPressOut={this._stopWhistleSound}>
>                             <Image 
>                                 style={{ flex: 1, resizeMode: 'contain' }}
>                                 source={ images.whisle_emoji.uri }/>
>                     </TouchableHighlight>
>                     <TouchableHighlight
>                         style={ audioButton.primary }
>                         underlayColor={ "#555555" }
>                         onPressIn={this._playApplauseSound}
>                         onPressOut={this._stopApplauseSound}>
>                             <Image 
>                                 style={{ flex: 1, resizeMode: 'contain' }}
>                                 source={ images.clapping_emoji.uri }/>
>                     </TouchableHighlight>
>                     <TouchableHighlight
>                         style={ audioButton.primary }
>                         underlayColor={ "#555555" }
>                         onPressIn={this._playBooSound}
>                         onPressOut={this._stopBooSound}>
>                             <Image 
>                                 style={{ flex: 1, resizeMode: 'contain' }}
>                                 source={images.angry_emoji.uri}/>
>                     </TouchableHighlight> 
>               </View>
></View>

I also moved some of the styling. I have something similar to this but it uses TouchableOpacity. so I set yours up the way mine works, minus the TouchableHighlight of course

1 Like

Hey, thank you for the reply, I tried the way you offered to me but right now I am having the same problem with ios. Well actually the problem changed a bit, this time I can only click the TouchableHighlight on the very right which is the one on the end of the code. The others are not even pressable. They still do not activate. Have you faced such a problem with Touchables in ios.

Addition: If the Touchables are vertically next to each other, it works. However, if the Touchables are horizontally next to each other, I still am having problems. This comment is for ios. I do not face any of these problems with android.

Maybe try swapping out to TouchableOpacity? I know the docs mention TouchableHighlight having some effect on layout but I don’t think they mentioned that for TouchableOpacity. :woman_shrugging:t4:

What is the style for audiobutton.primary?

I have tried the TouchableOpacity as well, I am having the same problem on ios. Actually I have completely converted TouchableHighlights to TouchableOpacities, I liked opacity better :smiley:
The audiobutton.primary can be seen below:

const audioButton = StyleSheet.create({
    primary: {
        width: screen_width / 6,
        height: screen_width / 6,
        borderRadius: (screen_width) / 3,
        backgroundColor: 'rgba(0, 0, 0, 0)',
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: '#000000',
        borderWidth: 1, 
    },
    pic: {
        width: screen_width / 6,
        height: screen_width / 6,
    }
});

My only suggestion would maybe be to experiment with setting solid height and width values instead of the divided screen width and see if that makes a difference. Then work from there.

Do you mean setting solid heigh and width for the Touchables? Because I think I did set them as such by using the screen_width constant which is:

const screen_width = Math.round(Dimensions.get('window').width);

Yes, just to see if setting it to the screen dimensions has anything to do with your problem.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.