TouchableHighlight and TouchableOpacity affect layout on Android

Question

I noticed that replacing TouchableWithoutFeedback with TouchableHighlight or TouchableOpacity can lead to layout differences. 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 :

Styles:

 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', }, 

Answer 1

The solution is not to provide a wrapper. Just set the style directly to 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> 

Answer 2

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

https://facebook.imtqy.com/react-native/docs/touchableopacity

"The opacity is controlled by placing the children in the Animated.View, which is added to the view hierarchy. Keep in mind that this can affect the layout."

Answer 3

style on TouchableOpacsity instead of presentation

Answer 4

 <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

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