TouchableHighlight and TouchableOpacity affect layout on Android

touchableopacity vs touchablehighlight
touchableopacity hitslop
touchablehighlight underlaycolor transparent
touchablehighlight not working
touchablehighlight disable
react native nested touchableopacity
touchableopacity disable
touchableopacity background color

I noticed that replacing TouchableWithoutFeedback with TouchableHighlight or TouchableOpacity can cause differences in layout. Is this expected?

Example:

<TouchableWithoutFeedback onPress={this.onClick}>
  <View style={styles.row_container}>
    <Text style={styles.row_text}>
      {'I count the number of taps: ' + this.state.clicks}
    </Text>
  </View>
</TouchableWithoutFeedback>

With TouchableWithoutFeedback:

Replacing it with TouchableOpacity:

The styles are:

row_container: {
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
  flex: 1,
  height: 100,
  borderColor: '#333333',
  borderWidth: 1,
  borderRadius: 5,
  padding: 5,
},
row_text: {
  flex: 1,
  fontSize: 18,
  alignSelf: 'center',
},

The solution is not to introduce the wrapper view. Simply set the style directly on TouchableHighlight or TouchableOpacity:

<TouchableOpacity onPress={this.onClick} style={styles.row_container}>
  <Text style={styles.row_text}>
    {'I count the number of taps: ' + this.state.clicks}
  </Text>
</TouchableOpacity>

TouchableHighlight and TouchableOpacity affect layout on Android, The solution is not to introduce the wrapper view. Simply set the style directly on TouchableHighlight or TouchableOpacity : <TouchableOpacity  The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color. TouchableHighlight must have one child (not zero or more than one).

To answer the question "is this expected," according to the docs, yes.

https://facebook.github.io/react-native/docs/touchableopacity

"Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout."

TouchableHighlight · React Native, I noticed that replacing TouchableWithoutFeedback with TouchableHighlight or TouchableOpacity can cause differences in layout. Is this expected? Example:  TouchableHighlight. A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts

style on TouchableOpacsity instead of View

TouchableOpacity · React Native, The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly,  A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy.

<TouchableOpacity style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}>
   <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} />
   <Text style={{color:'#fff'}}>Lịch Sử</Text>
</TouchableOpacity>

instead of

<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}>
   <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} />
    <Text style={{color:'#fff'}}>Lịch Sử</Text>
</View>

Creating & Styling Buttons in React Native Using TouchableOpacity , Be aware that this can affect layout. { useState } from "react"; import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; export bool, No, Android  A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is possible to add to an app without weird side-effects.

View - Deco React Native Docs, Be aware that this can affect layout. Example: renderButton: function() { return ( <​TouchableOpacity onPress={this._onPressButton}> <Image style={styles.button}​  TouchableHighlight A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.

React Native Touchable - 4 Different Type of Touchables, You'll be able to build a button with any layout and look by using styles and the other TouchableOpacity , TouchableHighlight are mainly used for iOS; TouchableNativeFeedback is mainly used for Android,; TouchableOpacity increases the lighteness of a button This won't have any effect on the button. A framework for building native apps using React,A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decr

React Native Touchables, simply want to wrap your component in TouchableHighlight or TouchableOpacity . But since pointerEvents does not affect layout/appearance, and we are already See http://developer.android.com/reference/android/view/​View.html#  (Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions. elevation will go into the style property and it can be implemented like so.

Comments
  • Worked perfectly!
  • Could you please add more details to make this answer better?