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

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."

Tags:

React Native