Fix/incubator dialog fader visibility and more (#2379)

* Improve fade view's code and fix not being shown sometimes

* Change imports

* Do not set pointerEvents by default (allow via props)

Author: M-i-k-e-l

src/incubator/Dialog/dialog.api.json

@@ -13,6 +13,11 @@
       "type": "ViewStyle",
       "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
     },
+    {
+      "name": "containerProps",
+      "type": "ViewProps",
+      "description": "Extra props for the container"
+    },
     {
       "name": "onDismiss",
       "type": "(props?: DialogProps) => void",

src/incubator/Dialog/index.tsx

@@ -4,9 +4,9 @@ import {StyleSheet, View as RNView} from 'react-native';
 import hoistStatics from 'hoist-non-react-statics';
 import {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 import {PanGestureHandler} from 'react-native-gesture-handler';
-import {Spacings, Colors, BorderRadiuses} from 'style';
+import {Spacings, Colors, BorderRadiuses} from '../../style';
 import {asBaseComponent} from '../../commons/new';
-import {useDidUpdate} from 'hooks';
+import {useDidUpdate} from '../../hooks';
 import View from '../../components/view';
 import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
@@ -34,6 +34,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     visible: propsVisibility = false,
     headerProps,
     containerStyle,
+    containerProps,
     width,
     height,
     onDismiss,
@@ -163,7 +164,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const renderDialog = () => {
     return (
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
-        <View pointerEvents={'box-none'} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+        <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
           {headerProps && <DialogHeader {...headerProps}/>}
           {children}
         </View>

src/incubator/Dialog/types.ts

@@ -77,6 +77,10 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
    * The Dialog`s container style (it is set to {position: 'absolute'})
    */
   containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Extra props for the container
+   */
+  containerProps?: Omit<ViewProps, 'reanimated' | 'animated' | 'style' | 'onLayout' | 'ref' | 'testID'>;
   /**
    * The dialog width.
    */

src/incubator/Dialog/useAnimatedTransition.ts

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useEffect, useCallback} from 'react';
 import {
-  runOnJS,
   useSharedValue,
   withSpring,
   withTiming,
@@ -113,21 +112,15 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
   const animateIn = useCallback(() => {
     'worklet';
     if (enterFrom) {
-      if (onAnimationStart) {
-        runOnJS(onAnimationStart)('enter');
-      }
-
+      onAnimationStart?.('enter');
       translateTo({x: 0, y: 0}, withSpring, ENTER_ANIMATION_CONFIG, enterFrom, onEnterAnimationEnd, delay?.enter);
     }
   }, [onEnterAnimationEnd, delay?.enter]);
 
   const animateOut = useCallback(() => {
     'worklet';
     if (exitTo) {
-      if (onAnimationStart) {
-        runOnJS(onAnimationStart)('exit');
-      }
-
+      onAnimationStart?.('exit');
       translateTo(getLocation(exitTo), withTiming, EXIT_ANIMATION_CONFIG, exitTo, onExitAnimationEnd, delay?.exit);
     }
   }, [hiddenLocation, exitTo, onExitAnimationEnd, delay?.exit]);

src/incubator/Dialog/useFadeView.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {useCallback} from 'react';
 import {useSharedValue, withTiming, useAnimatedStyle} from 'react-native-reanimated';
-import {Colors} from 'style';
+import {Colors} from '../../style';
 import View from '../../components/view';
 import {ModalProps} from '../../components/modal';
 import {TransitionViewAnimationType} from './useAnimatedTransition';
@@ -19,19 +19,23 @@ export interface FadeViewMethods {
 
 const useFadeView = (props: FadeViewProps) => {
   const {visible, overlayBackgroundColor = DEFAULT_OVERLAY_BACKGROUND_COLORS, testID} = props;
-  const fadeOpacity = useSharedValue<number>(Number(visible));
+  const fadeOpacity = useSharedValue<0 | 1>(visible ? 1 : 0);
 
   const hideNow = useCallback(() => {
     fadeOpacity.value = 0;
   }, []);
 
   const fade = useCallback((type: AnimationType) => {
-    fadeOpacity.value = withTiming(Number(type === 'enter'), {duration: 300});
+    'worklet';
+    const newValue = type === 'enter' ? 1 : 0;
+    if (fadeOpacity.value !== newValue) {
+      fadeOpacity.value = newValue;
+    }
   }, []);
 
   const fadeStyle = useAnimatedStyle(() => {
     return {
-      opacity: fadeOpacity.value,
+      opacity: withTiming(fadeOpacity.value, {duration: 300}),
       backgroundColor: overlayBackgroundColor
     };
   }, [overlayBackgroundColor]);