Q: TouchableHighlight and TouchableOpacity affect layout on Android 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',
},


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

A: 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>


A: <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>


A: style on TouchableOpacsity instead of View
