[Android] Touchables in Interactable.View

Hello,

I'm currently facing an issue only on Android. When I press a touchable inside an Interactable.View it's never fired. It looks like the views are way more sensitive in Android and I have to press very straight and without moving my finger.

On ios, it's working perfectly

Has somebody else faced a similar issue ?

Ok, I searched a long time for a workaround on this issue. I've came to the idea of having all my Interactable.View set as dragEnable={false} so that the touchable inside could easily be pressed.

Then I added an onLongPress on my Touchable that makes my Interactable.View draggable. It is working but the problem now is that when onLongPress is fired, the Interactable.View is correctly set to dragEnabled={true} but it doesn't catch my drag afterwards. I have to remove my finger and then start dragging.

It looks like the TouchableOpacity is catching all the movements after the onLongPress.

Here's my code (simplified for understanding) :

    <Interactable.View
        animatedNativeDriver={true}
        dragEnabled={this.state.editMode}    
    >
        <TouchableOpacity
            onPress={() => alert('Touchable Pressed')}
            onLongPress={() => this.setState({editMode: true})}
        >
            <Text>Test Button</Text>
        </TouchableOpacity>
    </Interactable.View>

[victorileaf]

Any one found a solution for this issue?

I think this issue is not resolvable in any way... It's not wix's issue here but rather how touchables behave in react-native Android. Maybe we should try to develop a module that wraps the native Android Button component.

I'll try to explore more on that next week since this issue stills blocks me.

Ok, I managed to solve my issue by using the React Native Animated library and PanResponder. This is how I did it:

First I created an Animated.ValueXY for my bubble position. It is animated by my PanResponder on Drag. In my onResponderRelease I check if the user dragged more that 3 pixels. If not, I launch the onPress manually by calling .touchableHandlePress() on my TouchableOpacity instance.

By doing it this way, I don't have to worry anymore if my touchable is catching the drag. My PanResponder captures everything. And I chose when the button is actually pressed. I also mimic the button feel by manually setting the opacity on the instance.

const position = new Animated.ValueXY({x: 0, y: 0});
const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => {
        // Set opacity of button to half
        this._touchable.setOpacityTo(0.5, 100);
        // PanResponder always capturing
        return true;
    },
    // At each drag start
    onPanResponderGrant: (evt, gestureState) => {
        // Add offset of last position
        position.setOffset(position.__getValue());
        // Resets to x:0 and y:0
        position.setValue({ x: 0, y: 0 });
    },
    onPanResponderMove: (event, gesture) => {
        // If user drags more that 3px around
        if (gesture.dx > 3 || gesture.dy > 3 || gesture.dy < -3 || gesture.dx < -3) {
            // Start moving the view around
            position.setValue({ x: gesture.dx, y: gesture.dy });
            // Reset button Opacity
            this._touchable.setOpacityTo(1, 100);
        }
    },
    // When the user releases touch
    onPanResponderRelease: (event, gesture) => {
        // If the user didn't move more than 3px around, I consider it as a press on the button
        if (gesture.dx < 3 && gesture.dx > -3 && gesture.dy < 3 && gesture.dy > -3) {
          // Launch button on click
          this._touchable.touchableHandlePress();
          // Reset button opacity 
          this._touchable.setOpacityTo(1, 100);
        }
    }
});

My component :

<Animated.View
    style={...this.state.position.getLayout()}
    {...this.state.panResponder.panHandlers}
 >
    <TouchableOpacity
        onPress={() => alert("Click")}
        ref={(touchable) => this._touchable = touchable}
        style={styles.littleCircle}
    />
</Animated.View>

I also recreated the SnapPoints system but no need to show it here. HMU if anybody wants a gist

[iLeafSolutionsPvtLtd]

Thanks a lot bro ... I was starting to implement this using animated .. can u share the gist?

[victorkvarghese]

@DEEvent Can u share the code?

@victorileaf @victorkvarghese Sure ! Here's the link to the gist and how I managed to do it : https://gist.github.com/Deevent/6300fb3531e6e526a880a82b98c049a6

[koloff]

Thank you, @DEEvent! But how can we drag the interactable, if the view inside it captures all events?

[afresh]

@victorileaf @victorkvarghese Sure ! Here's the link to the gist and how I managed to do it : https://gist.github.com/Deevent/6300fb3531e6e526a880a82b98c049a6

@DEEvent How to use the Bubble? Could you provide a demo?

[afresh]

Please use react-native-interactable-button instead. It solves the conflict between dragging events and clicking events.
https://github.com/afresh/react-native-interactable-button

[woodpav]

Does anyone know what this is caused by? I'm trying to fix the java code.

[victorkvarghese]

I searched everywhere ..almost everyone said the same ..

It's not wix's issue here but rather how touchables behave in react-native Android. Couldn't go deep into why this happens though...

[woodpav]

Are there any resources you can point me towards?

[victorkvarghese]

I tried another lib.. react native gesture handler.. there is a chat heads functionality .. it works flawlessly on iOS but issues with Android.

https://github.com/kmagiera/react-native-gesture-handler/tree/master/Example/chatHeads