Fix/incubator touch2 long press (#1435)

* Fix missing behaviour on long-press, active opacity was dismissed

* added RN-touchable-opacity to demo for reference

Author: mendyEdri

demo/src/screens/incubatorScreens/TouchableOpacityScreen.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {TouchableOpacity} from 'react-native';
 import {View, Text, Colors, Incubator} from 'react-native-ui-lib';
 
 class TouchableOpacityScreen extends Component {
@@ -35,6 +36,24 @@ class TouchableOpacityScreen extends Component {
     );
   }
 
+  renderRNTouchableExample = () => {
+    return (
+      <View row centerV marginT-20>
+        <Text marginR-14>RN TouchableOpacity</Text>
+        <TouchableOpacity
+          onPress={() => {
+            console.warn('onPress');
+          }}
+          onLongPress={() => {
+            console.warn('onLongPress');
+          }}
+        >
+          <View style={{backgroundColor: Colors.green40, width: 100, height: 34, borderRadius: 22}}/>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
   render() {
     const {counter, longPressCounter} = this.state;
     return (
@@ -64,6 +83,7 @@ class TouchableOpacityScreen extends Component {
         >
           <Text white>TouchableOpacity2</Text>
         </Incubator.TouchableOpacity2>
+        {this.renderRNTouchableExample()}
       </View>
     );
   }

src/incubator/TouchableOpacity2.tsx

@@ -11,7 +11,7 @@ import Reanimated, {
 } from 'react-native-reanimated';
 import {TapGestureHandler, LongPressGestureHandler, State} from 'react-native-gesture-handler';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../commons/new';
-import {ViewProps} from '../components/view';
+import View, {ViewProps} from '../components/view';
 
 export type TouchableOpacityProps = {
   /**
@@ -107,23 +107,24 @@ function TouchableOpacity(props: Props) {
     },
     onEnd: () => {
       toggleActive(0);
-
       runOnJS(onPress)();
     },
     onFail: () => {
-      toggleActive(0);
+      if (!isLongPressed.value) {
+        toggleActive(0);
+      }
     }
   });
 
   const longPressGestureHandler = useAnimatedGestureHandler({
     onActive: () => {
       if (!isLongPressed.value) {
         isLongPressed.value = true;
-        toggleActive(0);
         runOnJS(onLongPress)();
       }
     },
     onFinish: () => {
+      toggleActive(0);
       isLongPressed.value = false;
     }
   });
@@ -140,6 +141,8 @@ function TouchableOpacity(props: Props) {
     };
   }, [backgroundColor, feedbackColor]);
 
+  const Container = props.onLongPress ? LongPressGestureHandler : View;
+
   return (
     <TapGestureHandler
       // @ts-expect-error
@@ -149,7 +152,7 @@ function TouchableOpacity(props: Props) {
     >
       <Reanimated.View>
         {/* @ts-expect-error */}
-        <LongPressGestureHandler onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
+        <Container onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
           <Reanimated.View
             {...others}
             ref={forwardedRef}
@@ -166,7 +169,7 @@ function TouchableOpacity(props: Props) {
           >
             {children}
           </Reanimated.View>
-        </LongPressGestureHandler>
+        </Container>
       </Reanimated.View>
     </TapGestureHandler>
   );