React-native-windows: TouchableOpacity onPress only fires when clicking on content inside

[victorileaf]

Environment

1. react-native -v: 0.46.4
2. npm ls rnpm-plugin-windows: [email protected]
3. npm ls react-native-windows: [email protected]
4. node -v: v8.2.1
5. npm -v: 5.3.0
6. yarn --version:

Then, specify:

• Target Platform: iOs and Windows UWP

10.0.10586

• Target Platform Version(s): Windows 10

• Target Device(s): Desktop

• Development Operating System: Windows

• Visual Studio Version: 2015 Community

Steps to Reproduce

(Write your steps here:)
I'm using Touchable Opacity the code is below

  <TouchableOpacity
            onPress={()=>{props.onItemClick();}}
            style={props.isSelected ? styles.itemViewSelected : styles.itemView}>
            <View style={styles.subView}>
                <Text style={props.isSelected ? styles.itemTextSelected : styles.itemText}>
                    {props.name}
                </Text>
            </View>
        </TouchableOpacity>

styles

```
itemView:{
flexDirection:'column',
justifyContent:'center'
},
itemViewSelected:{
flexDirection:'column',
justifyContent:'center',
backgroundColor: AppStyles.color.COLOR_MIDNIGHT,
},
subView:{
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center'
},
itemText:{
fontSize:16,
fontFamily: AppStyles.fonts.FONT_NORMAL,
color: AppStyles.color.COLOR_BLACK,
margin:12
},
itemTextSelected :{
fontSize:16,
color: AppStyles.color.COLOR_WHITE,
fontFamily: AppStyles.fonts.FONT_NORMAL,
margin:12
},

```

Expected Behavior

The Touchable Opacity onPress should fire when we click anywhere in the touchable.

Actual Behavior

The Touchable Opacity onPress only fire when i click on the text inside the touchable opacity. In iOs onPress works perfectly clicking anywhere inside the touchable,
But in windows the onPress is getting fired only when we click on the content inside the Touchable Opacity. If the text has half the width of touchable opacity .. click will only work on the text (I think this happens when u have nested views inside .. i was bale to reproduce this issue in multiple places)

[rozele]

@victorileaf can you try setting subView backgroundColor to transparent?

[victorileaf]

@rozele Its working when i changed the subView backgroundColorto transparent .
But its supposed to work without this right? I have many buttons here and there
Any fixes on the way?

this happens for normal view too

    <TouchableOpacity>
            <View style={styles.buttonTab}>
                <Text style={styles.buttonTabText}>{attributeName}</Text>
            </View>
        </TouchableOpacity>

I need to put backgroundColor transparent then only click works outside text

Thanks a lot for the response
Cheers man :)

[victorileaf]

@rozele Any help of this issue (huge blocker) will be highly appreciated man :)
https://github.com/Microsoft/react-native-windows/issues/1370

[rozele]

@victorileaf unfortunately there's not many other options. This is a problem with how the "hit test" works on UWP (it does not pick up Canvas instances without a background). It's too expensive to render all Canvas instances with a transparent background, especially since many Canvas instances are only used for layout. It really has to be app specific to know that a has to have the transparent background.

I'll take a second pass at the code for and see if there's a way we can override the default styles for these and ensure transparent is set, but I've had to do this transparent setting manually for other apps I've built.

[alexcoady]

My hack is as follows (I'm using WPF so it may work differently):

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

<TouchableOpacity>
  <Text style={StyleSheet.absoluteFillObject} />
  <View>
    {/* Your content */}
  </View>
</TouchableOpacity>

Adding an empty <Text /> component that absolutely fills the touchable makes the entire area.. touchable.

[rozele]

@alexcoady why can't you apply the style to the <View/>? Seems like wasted allocations to add an empty TextBlock.

[alexcoady]

@rozele This has no effect in the WPF version. The only way I've been able to make the entire area clickable is the approach I posted above.

[rozele]

Closing - we're actually relying on the hit test functionality of UWP Canvas now to optimize the TouchHandler behavior. "Painting" a transparent background is the recommended solution.