@react-native-ohos/native-base 3.4.29-rc.1

package/lib/module/components/composites/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["Tooltip"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB","sourcesContent":["export { Tooltip } from './Tooltip';\r\nexport type { ITooltipProps } from './types';\r\n"]}

package/lib/module/components/composites/Tooltip/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/components/composites/Tooltip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/module/components/composites/Transitions/Fade.js

@@ -0,0 +1,38 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PresenceTransition from '../Transitions/PresenceTransition';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { usePropsResolution } from '../../../hooks/';
+
+const Fade = ({
+  children,
+  ...props
+}, ref) => {
+  const {
+    in: animationState,
+    entryDuration,
+    exitDuration,
+    ...resolvedProps
+  } = usePropsResolution('Fade', props); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  if (entryDuration) {
+    resolvedProps.animate.transition.duration = entryDuration;
+  }
+
+  if (exitDuration) {
+    resolvedProps.exit.transition.duration = exitDuration;
+  }
+
+  return /*#__PURE__*/React.createElement(PresenceTransition, _extends({
+    visible: animationState,
+    ref: ref
+  }, resolvedProps), children);
+};
+
+export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Fade));
+//# sourceMappingURL=Fade.js.map

package/lib/module/components/composites/Transitions/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Fade.tsx"],"names":["React","PresenceTransition","useHasResponsiveProps","usePropsResolution","Fade","children","props","ref","in","animationState","entryDuration","exitDuration","resolvedProps","animate","transition","duration","exit","memo","forwardRef"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,kBAAP,MAA+B,mCAA/B;AAEA,SAASC,qBAAT,QAAsC,sCAAtC;AACA,SAASC,kBAAT,QAAmC,iBAAnC;;AAEA,MAAMC,IAAI,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,EAAqCC,GAArC,KAAmD;AAC9D,QAAM;AACJC,IAAAA,EAAE,EAAEC,cADA;AAEJC,IAAAA,aAFI;AAGJC,IAAAA,YAHI;AAIJ,OAAGC;AAJC,MAKFT,kBAAkB,CAAC,MAAD,EAASG,KAAT,CALtB,CAD8D,CAO9D;;AACA,MAAIJ,qBAAqB,CAACI,KAAD,CAAzB,EAAkC;AAChC,WAAO,IAAP;AACD;;AAED,MAAII,aAAJ,EAAmB;AACjBE,IAAAA,aAAa,CAACC,OAAd,CAAsBC,UAAtB,CAAiCC,QAAjC,GAA4CL,aAA5C;AACD;;AACD,MAAIC,YAAJ,EAAkB;AAChBC,IAAAA,aAAa,CAACI,IAAd,CAAmBF,UAAnB,CAA8BC,QAA9B,GAAyCJ,YAAzC;AACD;;AAED,sBACE,oBAAC,kBAAD;AAAoB,IAAA,OAAO,EAAEF,cAA7B;AAA6C,IAAA,GAAG,EAAEF;AAAlD,KAA2DK,aAA3D,GACGP,QADH,CADF;AAKD,CAxBD;;AA0BA,4BAAeL,KAAK,CAACiB,IAAN,eAAWjB,KAAK,CAACkB,UAAN,CAAiBd,IAAjB,CAAX,CAAf","sourcesContent":["import React from 'react';\r\nimport PresenceTransition from '../Transitions/PresenceTransition';\r\nimport type { IFadeProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { usePropsResolution } from '../../../hooks/';\r\n\r\nconst Fade = ({ children, ...props }: IFadeProps, ref?: any) => {\r\n  const {\r\n    in: animationState,\r\n    entryDuration,\r\n    exitDuration,\r\n    ...resolvedProps\r\n  } = usePropsResolution('Fade', props);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  if (entryDuration) {\r\n    resolvedProps.animate.transition.duration = entryDuration;\r\n  }\r\n  if (exitDuration) {\r\n    resolvedProps.exit.transition.duration = exitDuration;\r\n  }\r\n\r\n  return (\r\n    <PresenceTransition visible={animationState} ref={ref} {...resolvedProps}>\r\n      {children}\r\n    </PresenceTransition>\r\n  );\r\n};\r\n\r\nexport default React.memo(React.forwardRef(Fade));\r\n"]}

package/lib/module/components/composites/Transitions/PresenceTransition.js

@@ -0,0 +1,39 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { memo, forwardRef } from 'react';
+import { ExitAnimationContext } from '../../primitives/Overlay/ExitAnimationContext';
+import { Transition } from './Transition';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const PresenceTransition = ({
+  visible = false,
+  onTransitionComplete,
+  ...rest
+}, ref) => {
+  // const [animationExited, setAnimationExited] = React.useState(!visible);
+  const {
+    setExited
+  } = React.useContext(ExitAnimationContext); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(rest)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Transition, _extends({
+    visible: visible,
+    onTransitionComplete: state => {
+      if (state === 'exited') {
+        setExited(true);
+      } else {
+        setExited(false);
+      }
+
+      onTransitionComplete && onTransitionComplete(state);
+    }
+  }, rest, {
+    ref: ref
+  }));
+};
+
+export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(PresenceTransition));
+//# sourceMappingURL=PresenceTransition.js.map

package/lib/module/components/composites/Transitions/PresenceTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PresenceTransition.tsx"],"names":["React","memo","forwardRef","ExitAnimationContext","Transition","useHasResponsiveProps","PresenceTransition","visible","onTransitionComplete","rest","ref","setExited","useContext","state"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,IAAhB,EAAsBC,UAAtB,QAAwC,OAAxC;AACA,SAASC,oBAAT,QAAqC,+CAArC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,SAASC,qBAAT,QAAsC,sCAAtC;;AAEA,MAAMC,kBAAkB,GAAG,CACzB;AAAEC,EAAAA,OAAO,GAAG,KAAZ;AAAmBC,EAAAA,oBAAnB;AAAyC,KAAGC;AAA5C,CADyB,EAEzBC,GAFyB,KAGtB;AACH;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAgBX,KAAK,CAACY,UAAN,CAAiBT,oBAAjB,CAAtB,CAHG,CAIH;;AACA,MAAIE,qBAAqB,CAACI,IAAD,CAAzB,EAAiC;AAC/B,WAAO,IAAP;AACD;;AAED,sBACE,oBAAC,UAAD;AACE,IAAA,OAAO,EAAEF,OADX;AAEE,IAAA,oBAAoB,EAAGM,KAAD,IAAW;AAC/B,UAAIA,KAAK,KAAK,QAAd,EAAwB;AACtBF,QAAAA,SAAS,CAAC,IAAD,CAAT;AACD,OAFD,MAEO;AACLA,QAAAA,SAAS,CAAC,KAAD,CAAT;AACD;;AACDH,MAAAA,oBAAoB,IAAIA,oBAAoB,CAACK,KAAD,CAA5C;AACD;AATH,KAUMJ,IAVN;AAWE,IAAA,GAAG,EAAEC;AAXP,KADF;AAeD,CA3BD;;AA6BA,4BAAeT,IAAI,eAACC,UAAU,CAACI,kBAAD,CAAX,CAAnB","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { ExitAnimationContext } from '../../primitives/Overlay/ExitAnimationContext';\r\nimport { Transition } from './Transition';\r\nimport type { IPresenceTransitionProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst PresenceTransition = (\r\n  { visible = false, onTransitionComplete, ...rest }: IPresenceTransitionProps,\r\n  ref: any\r\n) => {\r\n  // const [animationExited, setAnimationExited] = React.useState(!visible);\r\n\r\n  const { setExited } = React.useContext(ExitAnimationContext);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(rest)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Transition\r\n      visible={visible}\r\n      onTransitionComplete={(state) => {\r\n        if (state === 'exited') {\r\n          setExited(true);\r\n        } else {\r\n          setExited(false);\r\n        }\r\n        onTransitionComplete && onTransitionComplete(state);\r\n      }}\r\n      {...rest}\r\n      ref={ref}\r\n    />\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(PresenceTransition));\r\n"]}

package/lib/module/components/composites/Transitions/ScaleFade.js

@@ -0,0 +1,41 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PresenceTransition from './PresenceTransition';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { usePropsResolution } from '../../../hooks/';
+
+const ScaleFade = ({
+  children,
+  ...props
+}, ref) => {
+  const {
+    in: animationState,
+    duration,
+    initialScale,
+    ...resolvedProps
+  } = usePropsResolution('ScaleFade', props); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  if (duration) {
+    resolvedProps.animate.transition.duration = duration;
+    resolvedProps.exit.transition.duration = duration;
+  }
+
+  if (initialScale) {
+    resolvedProps.animate.initial.scale = initialScale;
+    resolvedProps.exit.initial.scale = initialScale;
+  }
+
+  return /*#__PURE__*/React.createElement(PresenceTransition, _extends({
+    visible: animationState
+  }, resolvedProps, {
+    ref: ref
+  }), children);
+};
+
+export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(ScaleFade));
+//# sourceMappingURL=ScaleFade.js.map

package/lib/module/components/composites/Transitions/ScaleFade.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ScaleFade.tsx"],"names":["React","PresenceTransition","useHasResponsiveProps","usePropsResolution","ScaleFade","children","props","ref","in","animationState","duration","initialScale","resolvedProps","animate","transition","exit","initial","scale","memo","forwardRef"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,SAASC,qBAAT,QAAsC,sCAAtC;AACA,SAASC,kBAAT,QAAmC,iBAAnC;;AAEA,MAAMC,SAAS,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,EAA0CC,GAA1C,KAAwD;AACxE,QAAM;AACJC,IAAAA,EAAE,EAAEC,cADA;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,YAHI;AAIJ,OAAGC;AAJC,MAKFT,kBAAkB,CAAC,WAAD,EAAcG,KAAd,CALtB,CADwE,CAOxE;;AACA,MAAIJ,qBAAqB,CAACI,KAAD,CAAzB,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,MAAII,QAAJ,EAAc;AACZE,IAAAA,aAAa,CAACC,OAAd,CAAsBC,UAAtB,CAAiCJ,QAAjC,GAA4CA,QAA5C;AACAE,IAAAA,aAAa,CAACG,IAAd,CAAmBD,UAAnB,CAA8BJ,QAA9B,GAAyCA,QAAzC;AACD;;AACD,MAAIC,YAAJ,EAAkB;AAChBC,IAAAA,aAAa,CAACC,OAAd,CAAsBG,OAAtB,CAA8BC,KAA9B,GAAsCN,YAAtC;AACAC,IAAAA,aAAa,CAACG,IAAd,CAAmBC,OAAnB,CAA2BC,KAA3B,GAAmCN,YAAnC;AACD;;AAED,sBACE,oBAAC,kBAAD;AAAoB,IAAA,OAAO,EAAEF;AAA7B,KAAiDG,aAAjD;AAAgE,IAAA,GAAG,EAAEL;AAArE,MACGF,QADH,CADF;AAKD,CAzBD;;AA2BA,4BAAeL,KAAK,CAACkB,IAAN,eAAWlB,KAAK,CAACmB,UAAN,CAAiBf,SAAjB,CAAX,CAAf","sourcesContent":["import React from 'react';\r\nimport type { IScaleFadeProps } from './types';\r\nimport PresenceTransition from './PresenceTransition';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { usePropsResolution } from '../../../hooks/';\r\n\r\nconst ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {\r\n  const {\r\n    in: animationState,\r\n    duration,\r\n    initialScale,\r\n    ...resolvedProps\r\n  } = usePropsResolution('ScaleFade', props);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  if (duration) {\r\n    resolvedProps.animate.transition.duration = duration;\r\n    resolvedProps.exit.transition.duration = duration;\r\n  }\r\n  if (initialScale) {\r\n    resolvedProps.animate.initial.scale = initialScale;\r\n    resolvedProps.exit.initial.scale = initialScale;\r\n  }\r\n\r\n  return (\r\n    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>\r\n      {children}\r\n    </PresenceTransition>\r\n  );\r\n};\r\n\r\nexport default React.memo(React.forwardRef(ScaleFade));\r\n"]}

package/lib/module/components/composites/Transitions/Slide.js

@@ -0,0 +1,124 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, memo } from 'react';
+import Box from '../../primitives/Box';
+import PresenceTransition from './PresenceTransition';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Overlay } from '../../primitives/Overlay';
+import { usePropsResolution } from '../../../hooks/';
+const holderStyle = {
+  top: {
+    top: 0,
+    right: 0,
+    left: 0
+  },
+  right: {
+    right: 0,
+    top: 0,
+    bottom: 0
+  },
+  bottom: {
+    bottom: 0,
+    right: 0,
+    left: 0
+  },
+  left: {
+    left: 0,
+    bottom: 0,
+    top: 0
+  }
+};
+export const Slide = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  const {
+    in: visible,
+    placement,
+    overlay,
+    duration,
+    _overlay,
+    ...resolvedProps
+  } = usePropsResolution('Slide', props);
+  const [containerOpacity, setContainerOpacity] = React.useState(0);
+  const [size, setSize] = React.useState(0);
+
+  const provideSize = layoutSize => {
+    if (placement === 'right' || placement === 'left') setSize(layoutSize.width);else setSize(layoutSize.height);
+    setContainerOpacity(1);
+  };
+
+  const transition = {
+    duration
+  };
+  const animationStyle = {
+    top: {
+      initial: {
+        translateY: -size
+      },
+      animate: {
+        translateY: 0,
+        transition
+      }
+    },
+    bottom: {
+      initial: {
+        translateY: size
+      },
+      animate: {
+        translateY: 0,
+        transition
+      },
+      exit: {
+        translateY: size,
+        transition
+      }
+    },
+    left: {
+      initial: {
+        translateX: -size
+      },
+      animate: {
+        translateX: 0,
+        transition
+      }
+    },
+    right: {
+      initial: {
+        translateX: size
+      },
+      animate: {
+        translateX: 0,
+        transition
+      }
+    }
+  }; //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  const slideComponent = /*#__PURE__*/React.createElement(PresenceTransition, _extends({
+    visible: visible
+  }, animationStyle[placement], {
+    style: [{
+      position: 'absolute'
+    }, holderStyle[placement], {
+      height: '100%'
+    }]
+  }), /*#__PURE__*/React.createElement(Box, _extends({}, resolvedProps, {
+    opacity: containerOpacity,
+    ref: ref,
+    onLayout: e => provideSize(e.nativeEvent.layout)
+  }), children));
+
+  if (overlay) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Overlay, _extends({
+      isKeyboardDismissable: false
+    }, _overlay), slideComponent));
+  } else {
+    return slideComponent;
+  }
+}));
+export default Slide;
+//# sourceMappingURL=Slide.js.map

package/lib/module/components/composites/Transitions/Slide.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slide.tsx"],"names":["React","forwardRef","memo","Box","PresenceTransition","useHasResponsiveProps","Overlay","usePropsResolution","holderStyle","top","right","left","bottom","Slide","children","props","ref","in","visible","placement","overlay","duration","_overlay","resolvedProps","containerOpacity","setContainerOpacity","useState","size","setSize","provideSize","layoutSize","width","height","transition","animationStyle","initial","translateY","animate","exit","translateX","slideComponent","position","e","nativeEvent","layout"],"mappings":"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","sourcesContent":["import React, { forwardRef, memo } from 'react';\r\nimport Box from '../../primitives/Box';\r\nimport type { ISlideProps } from './types';\r\nimport PresenceTransition from './PresenceTransition';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { Overlay } from '../../primitives/Overlay';\r\nimport { usePropsResolution } from '../../../hooks/';\r\n\r\nconst holderStyle: any = {\r\n  top: {\r\n    top: 0,\r\n    right: 0,\r\n    left: 0,\r\n  },\r\n  right: {\r\n    right: 0,\r\n    top: 0,\r\n    bottom: 0,\r\n  },\r\n  bottom: {\r\n    bottom: 0,\r\n    right: 0,\r\n    left: 0,\r\n  },\r\n  left: {\r\n    left: 0,\r\n    bottom: 0,\r\n    top: 0,\r\n  },\r\n};\r\n\r\nexport const Slide = memo(\r\n  forwardRef(({ children, ...props }: ISlideProps, ref: any) => {\r\n    const {\r\n      in: visible,\r\n      placement,\r\n      overlay,\r\n      duration,\r\n      _overlay,\r\n      ...resolvedProps\r\n    } = usePropsResolution('Slide', props);\r\n    const [containerOpacity, setContainerOpacity] = React.useState(0);\r\n    const [size, setSize] = React.useState(0);\r\n    const provideSize = (layoutSize: any) => {\r\n      if (placement === 'right' || placement === 'left')\r\n        setSize(layoutSize.width);\r\n      else setSize(layoutSize.height);\r\n      setContainerOpacity(1);\r\n    };\r\n\r\n    const transition = { duration };\r\n\r\n    const animationStyle: any = {\r\n      top: {\r\n        initial: {\r\n          translateY: -size,\r\n        },\r\n        animate: {\r\n          translateY: 0,\r\n          transition,\r\n        },\r\n      },\r\n      bottom: {\r\n        initial: {\r\n          translateY: size,\r\n        },\r\n        animate: {\r\n          translateY: 0,\r\n          transition,\r\n        },\r\n        exit: {\r\n          translateY: size,\r\n          transition,\r\n        },\r\n      },\r\n      left: {\r\n        initial: {\r\n          translateX: -size,\r\n        },\r\n        animate: {\r\n          translateX: 0,\r\n          transition,\r\n        },\r\n      },\r\n      right: {\r\n        initial: {\r\n          translateX: size,\r\n        },\r\n        animate: {\r\n          translateX: 0,\r\n          transition,\r\n        },\r\n      },\r\n    };\r\n\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(props)) {\r\n      return null;\r\n    }\r\n\r\n    const slideComponent = (\r\n      <PresenceTransition\r\n        visible={visible}\r\n        {...animationStyle[placement]}\r\n        style={[\r\n          { position: 'absolute' },\r\n          holderStyle[placement],\r\n          { height: '100%' },\r\n        ]}\r\n      >\r\n        <Box\r\n          {...resolvedProps}\r\n          opacity={containerOpacity}\r\n          ref={ref}\r\n          onLayout={(e) => provideSize(e.nativeEvent.layout)}\r\n        >\r\n          {children}\r\n        </Box>\r\n      </PresenceTransition>\r\n    );\r\n\r\n    if (overlay) {\r\n      return (\r\n        <>\r\n          <Overlay isKeyboardDismissable={false} {..._overlay}>\r\n            {slideComponent}\r\n          </Overlay>\r\n        </>\r\n      );\r\n    } else {\r\n      return slideComponent;\r\n    }\r\n  })\r\n);\r\n\r\nexport default Slide;\r\n"]}

package/lib/module/components/composites/Transitions/SlideFade.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import Box from '../../primitives/Box';
+import { useThemeProps } from '../../../hooks/useThemeProps';
+import { Animated, Platform } from 'react-native';
+import { canUseDom } from '../../../utils';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const SlideFade = ({
+  children,
+  ...props
+}, ref) => {
+  const isDomUsable = canUseDom();
+  const {
+    in: animationState,
+    duration,
+    offsetX,
+    offsetY
+  } = useThemeProps('SlideFade', props);
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+  const slideAnimX = React.useRef(new Animated.Value(0)).current;
+  const slideAnimY = React.useRef(new Animated.Value(0)).current;
+
+  const animIn = () => {
+    if (isDomUsable) {
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+      Animated.timing(slideAnimX, {
+        toValue: 0,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+      Animated.timing(slideAnimY, {
+        toValue: 0,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+    }
+  };
+
+  const animOut = () => {
+    if (isDomUsable) {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+      offsetX && Animated.timing(slideAnimX, {
+        toValue: offsetX,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+      offsetY && Animated.timing(slideAnimY, {
+        toValue: offsetY,
+        duration: duration,
+        useNativeDriver: Platform.OS !== 'web'
+      }).start();
+    }
+  };
+
+  animationState ? animIn() : animOut(); //TODO: refactor for responsive prop
+
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [{
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnimX,
+        translateY: slideAnimY
+      }]
+    }],
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Box, props, children));
+};
+
+export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(SlideFade));
+//# sourceMappingURL=SlideFade.js.map

package/lib/module/components/composites/Transitions/SlideFade.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SlideFade.tsx"],"names":["React","Box","useThemeProps","Animated","Platform","canUseDom","useHasResponsiveProps","SlideFade","children","props","ref","isDomUsable","in","animationState","duration","offsetX","offsetY","fadeAnim","useRef","Value","current","slideAnimX","slideAnimY","animIn","timing","toValue","useNativeDriver","OS","start","animOut","opacity","transform","translateX","translateY","memo","forwardRef"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport Box from '../../primitives/Box';\r\nimport { useThemeProps } from '../../../hooks/useThemeProps';\r\nimport { Animated, Platform } from 'react-native';\r\nimport type { ISlideFadeProps } from './types';\r\nimport { canUseDom } from '../../../utils';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst SlideFade = ({ children, ...props }: ISlideFadeProps, ref?: any) => {\r\n  const isDomUsable = canUseDom();\r\n\r\n  const { in: animationState, duration, offsetX, offsetY } = useThemeProps(\r\n    'SlideFade',\r\n    props\r\n  );\r\n  const fadeAnim = React.useRef(new Animated.Value(0)).current;\r\n  const slideAnimX = React.useRef(new Animated.Value(0)).current;\r\n  const slideAnimY = React.useRef(new Animated.Value(0)).current;\r\n\r\n  const animIn = () => {\r\n    if (isDomUsable) {\r\n      Animated.timing(fadeAnim, {\r\n        toValue: 1,\r\n        duration: duration,\r\n        useNativeDriver: Platform.OS !== 'web',\r\n      }).start();\r\n      Animated.timing(slideAnimX, {\r\n        toValue: 0,\r\n        duration: duration,\r\n        useNativeDriver: Platform.OS !== 'web',\r\n      }).start();\r\n      Animated.timing(slideAnimY, {\r\n        toValue: 0,\r\n        duration: duration,\r\n        useNativeDriver: Platform.OS !== 'web',\r\n      }).start();\r\n    }\r\n  };\r\n  const animOut = () => {\r\n    if (isDomUsable) {\r\n      Animated.timing(fadeAnim, {\r\n        toValue: 0,\r\n        duration: duration,\r\n        useNativeDriver: Platform.OS !== 'web',\r\n      }).start();\r\n      offsetX &&\r\n        Animated.timing(slideAnimX, {\r\n          toValue: offsetX,\r\n          duration: duration,\r\n          useNativeDriver: Platform.OS !== 'web',\r\n        }).start();\r\n      offsetY &&\r\n        Animated.timing(slideAnimY, {\r\n          toValue: offsetY,\r\n          duration: duration,\r\n          useNativeDriver: Platform.OS !== 'web',\r\n        }).start();\r\n    }\r\n  };\r\n  animationState ? animIn() : animOut();\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Animated.View\r\n      style={[\r\n        {\r\n          opacity: fadeAnim,\r\n          transform: [{ translateX: slideAnimX, translateY: slideAnimY }],\r\n        },\r\n      ]}\r\n      ref={ref}\r\n    >\r\n      <Box {...props}>{children}</Box>\r\n    </Animated.View>\r\n  );\r\n};\r\n\r\nexport default React.memo(React.forwardRef(SlideFade));\r\n"]}

package/lib/module/components/composites/Transitions/Stagger.js

@@ -0,0 +1,61 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import cloneDeep from 'lodash.clonedeep';
+import React from 'react';
+import PresenceTransition from './PresenceTransition';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+const defaultStaggerConfig = {
+  offset: 0,
+  reverse: false
+};
+
+const Stagger = ({
+  children,
+  ...restProps
+}) => {
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(restProps)) {
+    return null;
+  }
+
+  return React.Children.map(children, (child, index) => {
+    const clonedAnimationConfig = cloneDeep(restProps);
+    const {
+      animate,
+      exit
+    } = clonedAnimationConfig;
+
+    if (animate) {
+      var _animate$transition$d, _animate$transition$s;
+
+      if (!animate.transition) {
+        animate.transition = {};
+      }
+
+      animate.transition.delay = (_animate$transition$d = animate.transition.delay) !== null && _animate$transition$d !== void 0 ? _animate$transition$d : 0;
+      const stagger = (_animate$transition$s = animate.transition.stagger) !== null && _animate$transition$s !== void 0 ? _animate$transition$s : defaultStaggerConfig;
+      const offset = stagger.reverse ? (React.Children.count(children) - 1 - index) * stagger.offset : index * stagger.offset;
+      animate.transition.delay = animate.transition.delay + offset;
+    }
+
+    if (exit) {
+      var _exit$transition$dela, _exit$transition$stag;
+
+      if (!exit.transition) {
+        exit.transition = {};
+      }
+
+      exit.transition.delay = (_exit$transition$dela = exit.transition.delay) !== null && _exit$transition$dela !== void 0 ? _exit$transition$dela : 0;
+      const stagger = (_exit$transition$stag = exit.transition.stagger) !== null && _exit$transition$stag !== void 0 ? _exit$transition$stag : defaultStaggerConfig;
+      const offset = stagger.reverse ? (React.Children.count(children) - 1 - index) * stagger.offset : index * stagger.offset;
+      exit.transition.delay = exit.transition.delay + offset;
+    }
+
+    return /*#__PURE__*/React.createElement(PresenceTransition, _extends({
+      key: child.key
+    }, clonedAnimationConfig), child);
+  });
+};
+
+export default Stagger;
+//# sourceMappingURL=Stagger.js.map

package/lib/module/components/composites/Transitions/Stagger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Stagger.tsx"],"names":["cloneDeep","React","PresenceTransition","useHasResponsiveProps","defaultStaggerConfig","offset","reverse","Stagger","children","restProps","Children","map","child","index","clonedAnimationConfig","animate","exit","transition","delay","stagger","count","key"],"mappings":";;AAAA,OAAOA,SAAP,MAAsB,kBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,SAASC,qBAAT,QAAsC,sCAAtC;AA+BA,MAAMC,oBAAoC,GAAG;AAAEC,EAAAA,MAAM,EAAE,CAAV;AAAaC,EAAAA,OAAO,EAAE;AAAtB,CAA7C;;AAEA,MAAMC,OAAO,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA+C;AAC7D;AACA,MAAIN,qBAAqB,CAACM,SAAD,CAAzB,EAAsC;AACpC,WAAO,IAAP;AACD;;AACD,SAAOR,KAAK,CAACS,QAAN,CAAeC,GAAf,CAAmBH,QAAnB,EAA6B,CAACI,KAAD,EAAQC,KAAR,KAAkB;AACpD,UAAMC,qBAAqB,GAAGd,SAAS,CAACS,SAAD,CAAvC;AACA,UAAM;AAAEM,MAAAA,OAAF;AAAWC,MAAAA;AAAX,QAAoBF,qBAA1B;;AAEA,QAAIC,OAAJ,EAAa;AAAA;;AACX,UAAI,CAACA,OAAO,CAACE,UAAb,EAAyB;AACvBF,QAAAA,OAAO,CAACE,UAAR,GAAqB,EAArB;AACD;;AACDF,MAAAA,OAAO,CAACE,UAAR,CAAmBC,KAAnB,4BAA2BH,OAAO,CAACE,UAAR,CAAmBC,KAA9C,yEAAuD,CAAvD;AACA,YAAMC,OAAO,4BAAGJ,OAAO,CAACE,UAAR,CAAmBE,OAAtB,yEAAiCf,oBAA9C;AACA,YAAMC,MAAM,GAAGc,OAAO,CAACb,OAAR,GACX,CAACL,KAAK,CAACS,QAAN,CAAeU,KAAf,CAAqBZ,QAArB,IAAiC,CAAjC,GAAqCK,KAAtC,IAA+CM,OAAO,CAACd,MAD5C,GAEXQ,KAAK,GAAGM,OAAO,CAACd,MAFpB;AAGAU,MAAAA,OAAO,CAACE,UAAR,CAAmBC,KAAnB,GAA2BH,OAAO,CAACE,UAAR,CAAmBC,KAAnB,GAA2Bb,MAAtD;AACD;;AAED,QAAIW,IAAJ,EAAU;AAAA;;AACR,UAAI,CAACA,IAAI,CAACC,UAAV,EAAsB;AACpBD,QAAAA,IAAI,CAACC,UAAL,GAAkB,EAAlB;AACD;;AACDD,MAAAA,IAAI,CAACC,UAAL,CAAgBC,KAAhB,4BAAwBF,IAAI,CAACC,UAAL,CAAgBC,KAAxC,yEAAiD,CAAjD;AACA,YAAMC,OAAO,4BAAGH,IAAI,CAACC,UAAL,CAAgBE,OAAnB,yEAA8Bf,oBAA3C;AACA,YAAMC,MAAM,GAAGc,OAAO,CAACb,OAAR,GACX,CAACL,KAAK,CAACS,QAAN,CAAeU,KAAf,CAAqBZ,QAArB,IAAiC,CAAjC,GAAqCK,KAAtC,IAA+CM,OAAO,CAACd,MAD5C,GAEXQ,KAAK,GAAGM,OAAO,CAACd,MAFpB;AAGAW,MAAAA,IAAI,CAACC,UAAL,CAAgBC,KAAhB,GAAwBF,IAAI,CAACC,UAAL,CAAgBC,KAAhB,GAAwBb,MAAhD;AACD;;AAED,wBACE,oBAAC,kBAAD;AAAoB,MAAA,GAAG,EAAEO,KAAK,CAACS;AAA/B,OAAwCP,qBAAxC,GACGF,KADH,CADF;AAKD,GAjCM,CAAP;AAkCD,CAvCD;;AAyCA,eAAeL,OAAf","sourcesContent":["import cloneDeep from 'lodash.clonedeep';\r\nimport React from 'react';\r\nimport PresenceTransition from './PresenceTransition';\r\nimport type { ISupportedTransitions, ITransitionConfig } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\ninterface IStaggerConfig {\r\n  offset: number;\r\n  reverse?: boolean;\r\n}\r\n\r\nexport interface IStaggerStyleProps extends ISupportedTransitions {\r\n  transition?: ITransitionConfig & { stagger?: IStaggerConfig };\r\n}\r\n\r\ninterface IStaggerProps {\r\n  children: any;\r\n  /**\r\n   * Initial styles before the transition starts\r\n   */\r\n  initial?: ISupportedTransitions;\r\n  /**\r\n   * The styles to which each child should animate to while entering.\r\n   */\r\n  animate?: IStaggerStyleProps;\r\n  /**\r\n   * The styles to which each child should animate to while exiting.\r\n   */\r\n  exit?: IStaggerStyleProps;\r\n  /**\r\n   * Determines whether to start the animation\r\n   */\r\n  visible?: boolean;\r\n}\r\n\r\nconst defaultStaggerConfig: IStaggerConfig = { offset: 0, reverse: false };\r\n\r\nconst Stagger = ({ children, ...restProps }: IStaggerProps) => {\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(restProps)) {\r\n    return null;\r\n  }\r\n  return React.Children.map(children, (child, index) => {\r\n    const clonedAnimationConfig = cloneDeep(restProps);\r\n    const { animate, exit } = clonedAnimationConfig;\r\n\r\n    if (animate) {\r\n      if (!animate.transition) {\r\n        animate.transition = {};\r\n      }\r\n      animate.transition.delay = animate.transition.delay ?? 0;\r\n      const stagger = animate.transition.stagger ?? defaultStaggerConfig;\r\n      const offset = stagger.reverse\r\n        ? (React.Children.count(children) - 1 - index) * stagger.offset\r\n        : index * stagger.offset;\r\n      animate.transition.delay = animate.transition.delay + offset;\r\n    }\r\n\r\n    if (exit) {\r\n      if (!exit.transition) {\r\n        exit.transition = {};\r\n      }\r\n      exit.transition.delay = exit.transition.delay ?? 0;\r\n      const stagger = exit.transition.stagger ?? defaultStaggerConfig;\r\n      const offset = stagger.reverse\r\n        ? (React.Children.count(children) - 1 - index) * stagger.offset\r\n        : index * stagger.offset;\r\n      exit.transition.delay = exit.transition.delay + offset;\r\n    }\r\n\r\n    return (\r\n      <PresenceTransition key={child.key} {...clonedAnimationConfig}>\r\n        {child}\r\n      </PresenceTransition>\r\n    );\r\n  });\r\n};\r\n\r\nexport default Stagger;\r\n"]}

package/lib/module/components/composites/Transitions/Transition.js

@@ -0,0 +1,164 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+const transformStylesMap = {
+  translateY: true,
+  translateX: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  rotate: true
+};
+const defaultStyles = {
+  opacity: 1,
+  translateY: 0,
+  translateX: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: '0deg'
+};
+
+const getAnimatedStyles = animateValue => (initial, to) => {
+  const styles = {
+    transform: []
+  };
+
+  for (let key in initial) {
+    if (key === 'transition') {
+      continue;
+    }
+
+    if (key in transformStylesMap) {
+      var _styles$transform;
+
+      (_styles$transform = styles.transform) === null || _styles$transform === void 0 ? void 0 : _styles$transform.push({
+        [key]: animateValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [initial[key], to[key]]
+        })
+      });
+    } else {
+      styles[key] = animateValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [initial[key], to[key]]
+      });
+    }
+  }
+
+  return styles;
+};
+
+const defaultTransitionConfig = {
+  type: 'timing',
+  useNativeDriver: true,
+  duration: 250,
+  delay: 0
+};
+export const Transition = /*#__PURE__*/forwardRef(({
+  children,
+  onTransitionComplete,
+  visible = false,
+  initial,
+  animate,
+  exit,
+  style,
+  as,
+  ...rest
+}, ref) => {
+  const animateValue = React.useRef(new Animated.Value(0)).current;
+  const Component = React.useMemo(() => {
+    if (as) {
+      return Animated.createAnimatedComponent(as);
+    }
+
+    return Animated.View;
+  }, [as]);
+  const [animationState, setAnimationState] = React.useState('');
+  const prevVisible = React.useRef(visible);
+  React.useEffect(() => {
+    if (animationState === 'entering' || animationState === 'exiting') {
+      var _transition$type;
+
+      const entryTransition = { ...defaultTransitionConfig,
+        ...(animate === null || animate === void 0 ? void 0 : animate.transition)
+      };
+      const exitTransition = { ...defaultTransitionConfig,
+        ...(exit === null || exit === void 0 ? void 0 : exit.transition)
+      };
+      const startAnimation = animationState === 'entering' ? 1 : 0;
+      const transition = startAnimation ? entryTransition : exitTransition;
+      Animated.sequence([// @ts-ignore - delay is present in defaultTransitionConfig
+      Animated.delay(transition.delay), Animated[(_transition$type = transition.type) !== null && _transition$type !== void 0 ? _transition$type : 'timing'](animateValue, {
+        toValue: startAnimation,
+        useNativeDriver: true,
+        ...transition
+      })]).start(() => {
+        if (animationState === 'entering') {
+          setAnimationState('entered');
+        } else if (animationState === 'exiting') {
+          setAnimationState('exited');
+        }
+      }); // });
+    }
+
+    if (animationState === 'exited') {
+      onTransitionComplete && onTransitionComplete('exited');
+    } else if (animationState === 'entered') {
+      onTransitionComplete && onTransitionComplete('entered');
+    } // if (animationState === 'entering') {
+    //   //
+    // }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [animationState, onTransitionComplete]);
+  React.useEffect(() => {
+    // if (!visible) {
+    if (prevVisible.current !== visible && !visible) {
+      setAnimationState('exiting');
+    }
+
+    if (visible) {
+      setAnimationState('entering');
+    }
+
+    prevVisible.current = visible; // }
+  }, [visible]); // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation
+  //  const initialState = { ...defaultStyles, ...initial };
+
+  const initialState = animationState === 'exited' && exit ? { ...defaultStyles,
+    ...exit
+  } : { ...defaultStyles,
+    ...initial
+  }; // const initialState = { ...defaultStyles, ...initial };
+  // initial =
+  //   animationState === 'exited'
+  //     ? { ...defaultStyles, ...exit }
+  //     : { ...defaultStyles, ...initial };
+
+  const animateState = { ...defaultStyles,
+    ...animate
+  }; // const [initialState, setInitialState] = React.useState({
+  //   ...defaultStyles,
+  //   ...initial,
+  // });
+  // console.log('Initial state ', initial);
+  // const [animateState] = React.useState({ ...defaultStyles, ...animate });
+
+  const styles = React.useMemo(() => {
+    // console.log('display state here', initial);
+    return [getAnimatedStyles(animateValue)(initialState, animateState), style];
+  }, [animateValue, initial, animate, style]);
+  return /*#__PURE__*/React.createElement(Component // pointerEvents="box-none"
+  , _extends({
+    pointerEvents: !visible ? 'none' : 'box-none' // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743
+    // needsOffscreenAlphaCompositing
+    // style={[styles]}
+    ,
+    style: [styles],
+    ref: ref
+  }, rest), children);
+});
+//# sourceMappingURL=Transition.js.map

package/lib/module/components/composites/Transitions/Transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Transition.tsx"],"names":["React","forwardRef","Animated","transformStylesMap","translateY","translateX","scale","scaleX","scaleY","rotate","defaultStyles","opacity","getAnimatedStyles","animateValue","initial","to","styles","transform","key","push","interpolate","inputRange","outputRange","defaultTransitionConfig","type","useNativeDriver","duration","delay","Transition","children","onTransitionComplete","visible","animate","exit","style","as","rest","ref","useRef","Value","current","Component","useMemo","createAnimatedComponent","View","animationState","setAnimationState","useState","prevVisible","useEffect","entryTransition","transition","exitTransition","startAnimation","sequence","toValue","start","initialState","animateState"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { forwardRef } from 'react';\r\nimport { Animated } from 'react-native';\r\nimport type {\r\n  ISupportedTransitions,\r\n  ITransitionConfig,\r\n  ITransitionProps,\r\n} from './types';\r\n\r\nconst transformStylesMap = {\r\n  translateY: true,\r\n  translateX: true,\r\n  scale: true,\r\n  scaleX: true,\r\n  scaleY: true,\r\n  rotate: true,\r\n};\r\n\r\nconst defaultStyles = {\r\n  opacity: 1,\r\n  translateY: 0,\r\n  translateX: 0,\r\n  scale: 1,\r\n  scaleX: 1,\r\n  scaleY: 1,\r\n  rotate: '0deg',\r\n};\r\n\r\nconst getAnimatedStyles = (animateValue: any) => (\r\n  initial: ISupportedTransitions,\r\n  to: ISupportedTransitions\r\n) => {\r\n  const styles: any = {\r\n    transform: [],\r\n  };\r\n  for (let key in initial) {\r\n    if (key === 'transition') {\r\n      continue;\r\n    }\r\n\r\n    if (key in transformStylesMap) {\r\n      styles.transform?.push({\r\n        [key]: animateValue.interpolate({\r\n          inputRange: [0, 1],\r\n          outputRange: [(initial as any)[key], (to as any)[key]],\r\n        }),\r\n      } as any);\r\n    } else {\r\n      styles[key] = animateValue.interpolate({\r\n        inputRange: [0, 1],\r\n        outputRange: [(initial as any)[key], (to as any)[key]],\r\n      });\r\n    }\r\n  }\r\n\r\n  return styles;\r\n};\r\n\r\nconst defaultTransitionConfig: ITransitionConfig = {\r\n  type: 'timing',\r\n  useNativeDriver: true,\r\n  duration: 250,\r\n  delay: 0,\r\n};\r\n\r\nexport const Transition = forwardRef(\r\n  (\r\n    {\r\n      children,\r\n      onTransitionComplete,\r\n      visible = false,\r\n      initial,\r\n      animate,\r\n      exit,\r\n      style,\r\n      as,\r\n      ...rest\r\n    }: ITransitionProps,\r\n    ref: any\r\n  ) => {\r\n    const animateValue = React.useRef(new Animated.Value(0)).current;\r\n\r\n    const Component = React.useMemo(() => {\r\n      if (as) {\r\n        return Animated.createAnimatedComponent(as);\r\n      }\r\n      return Animated.View;\r\n    }, [as]);\r\n\r\n    const [animationState, setAnimationState] = React.useState('');\r\n\r\n    const prevVisible = React.useRef(visible);\r\n\r\n    React.useEffect(() => {\r\n      if (animationState === 'entering' || animationState === 'exiting') {\r\n        const entryTransition = {\r\n          ...defaultTransitionConfig,\r\n          ...animate?.transition,\r\n        };\r\n        const exitTransition = {\r\n          ...defaultTransitionConfig,\r\n          ...exit?.transition,\r\n        };\r\n\r\n        const startAnimation = animationState === 'entering' ? 1 : 0;\r\n\r\n        const transition = startAnimation ? entryTransition : exitTransition;\r\n\r\n        Animated.sequence([\r\n          // @ts-ignore - delay is present in defaultTransitionConfig\r\n          Animated.delay(transition.delay),\r\n          Animated[transition.type ?? 'timing'](animateValue, {\r\n            toValue: startAnimation,\r\n            useNativeDriver: true,\r\n            ...transition,\r\n          }),\r\n        ]).start(() => {\r\n          if (animationState === 'entering') {\r\n            setAnimationState('entered');\r\n          } else if (animationState === 'exiting') {\r\n            setAnimationState('exited');\r\n          }\r\n        });\r\n        // });\r\n      }\r\n\r\n      if (animationState === 'exited') {\r\n        onTransitionComplete && onTransitionComplete('exited');\r\n      } else if (animationState === 'entered') {\r\n        onTransitionComplete && onTransitionComplete('entered');\r\n      }\r\n      // if (animationState === 'entering') {\r\n      //   //\r\n      // }\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [animationState, onTransitionComplete]);\r\n\r\n    React.useEffect(() => {\r\n      // if (!visible) {\r\n      if (prevVisible.current !== visible && !visible) {\r\n        setAnimationState('exiting');\r\n      }\r\n\r\n      if (visible) {\r\n        setAnimationState('entering');\r\n      }\r\n      prevVisible.current = visible;\r\n      // }\r\n    }, [visible]);\r\n\r\n    // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation\r\n\r\n    //  const initialState = { ...defaultStyles, ...initial };\r\n    const initialState =\r\n      animationState === 'exited' && exit\r\n        ? { ...defaultStyles, ...exit }\r\n        : { ...defaultStyles, ...initial };\r\n    // const initialState = { ...defaultStyles, ...initial };\r\n\r\n    // initial =\r\n    //   animationState === 'exited'\r\n    //     ? { ...defaultStyles, ...exit }\r\n    //     : { ...defaultStyles, ...initial };\r\n\r\n    const animateState = { ...defaultStyles, ...animate };\r\n\r\n    // const [initialState, setInitialState] = React.useState({\r\n    //   ...defaultStyles,\r\n    //   ...initial,\r\n    // });\r\n    // console.log('Initial state ', initial);\r\n\r\n    // const [animateState] = React.useState({ ...defaultStyles, ...animate });\r\n    const styles = React.useMemo(() => {\r\n      // console.log('display state here', initial);\r\n      return [\r\n        getAnimatedStyles(animateValue)(\r\n          initialState as ISupportedTransitions,\r\n          animateState as ISupportedTransitions\r\n        ),\r\n        style,\r\n      ];\r\n    }, [animateValue, initial, animate, style]);\r\n\r\n    return (\r\n      <Component\r\n        // pointerEvents=\"box-none\"\r\n        pointerEvents={!visible ? 'none' : 'box-none'}\r\n        // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743\r\n        // needsOffscreenAlphaCompositing\r\n        // style={[styles]}\r\n        style={[styles]}\r\n        ref={ref}\r\n        {...rest}\r\n      >\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n"]}