@fountain-ui/core 2.0.0-beta.82 → 2.0.0-beta.83

package/build/module/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","StyleSheet","useElevationStyle","Slide","SimpleBackdrop","defaultEnterDuration","defaultExitDuration","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","disableAnimation","enterDuration","exitDuration","hideBackdrop","onClose","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport Slide from '../Slide';\nimport SimpleBackdrop from './SimpleBackdrop';\nimport type ModalProps from './ModalProps';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nconst defaultEnterDuration = 300;\nconst defaultExitDuration = 150;\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        disableAnimation = false,\n        enterDuration = defaultEnterDuration,\n        exitDuration = defaultExitDuration,\n        hideBackdrop = false,\n        onClose,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(hideBackdrop || !visible) ? null : (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            )}\n\n            {!disableAnimation ? (\n                <Slide\n                    appear={visible}\n                    enterDuration={enterDuration}\n                    exitDuration={exitDuration}\n                    onEnter={() => setExited(false)}\n                    onExited={() => setExited(true)}\n                    style={animationStyle}\n                >\n                    {children}\n                </Slide>\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAWA,MAAMC,oBAAoB,GAAG,GAA7B;AACA,MAAMC,mBAAmB,GAAG,GAA5B;AAEA,OAAO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;AAMP,eAAe,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,gBAAgB,GAAG,KAJjB;IAKFC,aAAa,GAAGX,oBALd;IAMFY,YAAY,GAAGX,mBANb;IAOFY,YAAY,GAAG,KAPb;IAQFC,OARE;IASFC,KATE;IAUFC,OAVE;IAWF,GAAGC;EAXD,IAYFX,KAZJ;;EAcA,MAAMY,mBAAmB,GAAG,MAAM;IAC9B,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACZ,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAACiB,MAAD,EAASC,SAAT,IAAsB3B,KAAK,CAAC4B,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,cAAc,GAAGzB,iBAAiB,CAAC,CAAD,CAAxC;;EAEA,IAAI,CAACmB,OAAL,EAAc;IACV,IAAIN,gBAAgB,IAAIS,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,oBAAC,IAAD;IACI,KAAK,EAAExB,GAAG,CAAC,CACPC,UAAU,CAAC2B,YADJ,EAEPD,cAFO,EAGPP,KAHO,CAAD;EADd,GAMQE,UANR,GAQMJ,YAAY,IAAI,CAACG,OAAlB,GAA6B,IAA7B,gBACG,oBAAC,cAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEV;EAFb,EATR,EAeK,CAACE,gBAAD,gBACG,oBAAC,KAAD;IACI,MAAM,EAAEM,OADZ;IAEI,aAAa,EAAEL,aAFnB;IAGI,YAAY,EAAEC,YAHlB;IAII,OAAO,EAAE,MAAMQ,SAAS,CAAC,KAAD,CAJ5B;IAKI,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD,CAL7B;IAMI,KAAK,EAAEb;EANX,GAQKE,QARL,CADH,GAWGA,QA1BR,CADJ;AA8BH;AAAA"}
+{"version":3,"names":["React","View","css","StyleSheet","useElevationStyle","AnimatedContainer","SimpleBackdrop","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n    metadata: {\n        reason: ModalCloseReasonType\n    };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n    metadata: {\n        reason,\n    },\n});\n\nexport default function Modal(props: ModalProps) {\n    const {\n        animationStyle,\n        backdropOpacity = 0.5,\n        children,\n        closeAnimation,\n        disableAnimation = false,\n        hideBackdrop = false,\n        initialOpacity,\n        initialTranslateY,\n        onClose,\n        onEnter: onEnterProp,\n        onEntered: onEnteredProp,\n        onExit: onExitProp,\n        onExited: onExitedProp,\n        openAnimation,\n        style,\n        visible,\n        ...otherProps\n    } = props;\n\n    const handleBackdropPress = () => {\n        if (onClose) {\n            onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n        }\n    };\n\n    const [exited, setExited] = React.useState(true);\n\n    const elevationStyle = useElevationStyle(6);\n\n    const onEnter = () => {\n        setExited(false);\n        onEnterProp?.();\n    };\n\n    const onEntered = () => {\n        onEnteredProp?.();\n    };\n\n    const onExit = () => {\n        onExitProp?.();\n    };\n\n    const onExited = () => {\n        setExited(true);\n        onExitedProp?.();\n    };\n\n    if (!visible) {\n        if (disableAnimation || exited) {\n            return null;\n        }\n    }\n\n    return (\n        <View\n            style={css([\n                StyleSheet.absoluteFill,\n                elevationStyle,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {(!hideBackdrop && visible) ? (\n                <SimpleBackdrop\n                    onPress={handleBackdropPress}\n                    opacity={backdropOpacity}\n                />\n            ) : null}\n\n            {!disableAnimation ? (\n                <AnimatedContainer\n                    children={children}\n                    closeAnimation={closeAnimation}\n                    initialOpacity={initialOpacity}\n                    initialTranslateY={initialTranslateY}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={onExited}\n                    openAnimation={openAnimation}\n                    style={animationStyle}\n                    visible={visible}\n                />\n            ) : children}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAUA,OAAO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;AAMP,eAAe,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,eAAe,GAAG,GAFhB;IAGFC,QAHE;IAIFC,cAJE;IAKFC,gBAAgB,GAAG,KALjB;IAMFC,YAAY,GAAG,KANb;IAOFC,cAPE;IAQFC,iBARE;IASFC,OATE;IAUFC,OAAO,EAAEC,WAVP;IAWFC,SAAS,EAAEC,aAXT;IAYFC,MAAM,EAAEC,UAZN;IAaFC,QAAQ,EAAEC,YAbR;IAcFC,aAdE;IAeFC,KAfE;IAgBFC,OAhBE;IAiBF,GAAGC;EAjBD,IAkBFrB,KAlBJ;;EAoBA,MAAMsB,mBAAmB,GAAG,MAAM;IAC9B,IAAIb,OAAJ,EAAa;MACTA,OAAO,CAACb,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC2B,MAAD,EAASC,SAAT,IAAsBnC,KAAK,CAACoC,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,cAAc,GAAGjC,iBAAiB,CAAC,CAAD,CAAxC;;EAEA,MAAMiB,OAAO,GAAG,MAAM;IAClBc,SAAS,CAAC,KAAD,CAAT;IACAb,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBQ,SAAS,CAAC,IAAD,CAAT;IACAP,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACG,OAAL,EAAc;IACV,IAAIf,gBAAgB,IAAIkB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEhC,GAAG,CAAC,CACPC,UAAU,CAACmC,YADJ,EAEPD,cAFO,EAGPP,KAHO,CAAD;EADd,GAMQE,UANR,GAQM,CAACf,YAAD,IAAiBc,OAAlB,gBACG,oBAAC,cAAD;IACI,OAAO,EAAEE,mBADb;IAEI,OAAO,EAAEpB;EAFb,EADH,GAKG,IAbR,EAeK,CAACG,gBAAD,gBACG,oBAAC,iBAAD;IACI,QAAQ,EAAEF,QADd;IAEI,cAAc,EAAEC,cAFpB;IAGI,cAAc,EAAEG,cAHpB;IAII,iBAAiB,EAAEC,iBAJvB;IAKI,OAAO,EAAEE,OALb;IAMI,SAAS,EAAEE,SANf;IAOI,MAAM,EAAEE,MAPZ;IAQI,QAAQ,EAAEE,QARd;IASI,aAAa,EAAEE,aATnB;IAUI,KAAK,EAAEjB,cAVX;IAWI,OAAO,EAAEmB;EAXb,EADH,GAcGjB,QA7BR,CADJ;AAiCH;AAAA"}

package/build/module/Modal/ModalProps.js

@@ -1,2 +1,7 @@
+export let ANIMATION_TYPE;
 
+(function (ANIMATION_TYPE) {
+  ANIMATION_TYPE["SLIDE"] = "slide";
+  ANIMATION_TYPE["FADE"] = "fade";
+})(ANIMATION_TYPE || (ANIMATION_TYPE = {}));
 //# sourceMappingURL=ModalProps.js.map

package/build/module/Modal/ModalProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * The number of milliseconds to enter animation.\n     * @default 300\n     */\n    enterDuration?: number;\n\n    /**\n     * The number of milliseconds to exit animation.\n     * @default 150\n     */\n    exitDuration?: number;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void,\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n    SLIDE = 'slide',\n    FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     */\n    type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Style object provided to animation component.\n     */\n    animationStyle?: ComponentProps['style'];\n\n    /**\n     * Opacity for backdrop.\n     * @default 0.5\n     */\n    backdropOpacity?: number;\n\n    /**\n     * A single child content element.\n     */\n    children: React.ReactElement;\n\n    /**\n     * If `true`, the animation is disabled.\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Animation used when the modal closes.\n     */\n    closeAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the backdrop is not rendered.\n     * @default false\n     */\n    hideBackdrop?: boolean;\n\n    /**\n     * Set the initial value of opacity for animating.\n     */\n    initialOpacity?: number | undefined;\n\n    /**\n     * Set the initial value of transition y for animating.\n     */\n    initialTranslateY?: number | undefined;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: (event?: ModalCloseEvent) => void;\n\n    /**\n     * Callback fired when the enter animation will start.\n     */\n    onEnter?: () => void | undefined;\n\n    /**\n     * Callback fired when the enter animation is completed.\n     */\n    onEntered?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation will start.\n     */\n    onExit?: () => void | undefined;\n\n    /**\n     * Callback fired when the exit animation is completed.\n     */\n    onExited?: () => void | undefined;\n\n    /**\n     * Animation used when the modal opens.\n     */\n    openAnimation?: AnimationUnit[] | undefined;\n\n    /**\n     * If `true`, the modal is visible.\n     */\n    visible: boolean;\n}> {}\n"],"mappings":"AAMA,WAAkBA,cAAlB;;WAAkBA,c;EAAAA,c;EAAAA,c;GAAAA,c,KAAAA,c"}

package/build/module/Modal/index.js

@@ -1,2 +1,3 @@
 export { default, createModalCloseEvent } from './Modal';
+export { ANIMATION_TYPE } from './ModalProps';
 //# sourceMappingURL=index.js.map

package/build/module/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","createModalCloseEvent"],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps } from './ModalProps';\n"],"mappings":"AAAA,SAASA,OAAT,EAAkBC,qBAAlB,QAA+C,SAA/C"}
+{"version":3,"names":["default","createModalCloseEvent","ANIMATION_TYPE"],"sources":["index.ts"],"sourcesContent":["export { default, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport type { default as ModalProps, AnimationUnit } from './ModalProps';\nexport { ANIMATION_TYPE } from './ModalProps';\n"],"mappings":"AAAA,SAASA,OAAT,EAAkBC,qBAAlB,QAA+C,SAA/C;AAGA,SAASC,cAAT,QAA+B,cAA/B"}

package/build/typescript/Dialog/DialogProps.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
+import { ANIMATION_TYPE } from '../Modal';
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
+    /**
+     * Type of animation used when the dialog opens and closes.
+     * @default 'slide'
+     */
+    animationType?: ANIMATION_TYPE;
     /**
      * Dialog children, usually the included sub-components.
      */

package/build/typescript/Modal/AnimatedContainer/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type ModalProps from '../ModalProps';
+declare type AnimatedContainerProps = Pick<ModalProps, 'children' | 'closeAnimation' | 'initialOpacity' | 'initialTranslateY' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'openAnimation' | 'style' | 'visible'>;
+export default function AnimatedContainer(props: AnimatedContainerProps): JSX.Element;
+export {};

package/build/typescript/Modal/ModalProps.d.ts

@@ -1,7 +1,18 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
+import { Animated } from 'react-native';
 import type { ComponentProps, OverridableComponentProps } from '../types';
 import { ModalCloseEvent } from './Modal';
+export declare const enum ANIMATION_TYPE {
+    SLIDE = "slide",
+    FADE = "fade"
+}
+export declare type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {
+    /**
+     * Type of animation used when the dialog opens and closes.
+     */
+    type: ANIMATION_TYPE;
+};
 export default interface ModalProps extends OverridableComponentProps<ViewProps, {
     /**
      * Style object provided to animation component.
@@ -22,24 +33,46 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     disableAnimation?: boolean;
     /**
-     * The number of milliseconds to enter animation.
-     * @default 300
-     */
-    enterDuration?: number;
-    /**
-     * The number of milliseconds to exit animation.
-     * @default 150
+     * Animation used when the modal closes.
      */
-    exitDuration?: number;
+    closeAnimation?: AnimationUnit[] | undefined;
     /**
      * If `true`, the backdrop is not rendered.
      * @default false
      */
     hideBackdrop?: boolean;
+    /**
+     * Set the initial value of opacity for animating.
+     */
+    initialOpacity?: number | undefined;
+    /**
+     * Set the initial value of transition y for animating.
+     */
+    initialTranslateY?: number | undefined;
     /**
      * Callback fired when the component requests to be closed.
      */
     onClose?: (event?: ModalCloseEvent) => void;
+    /**
+     * Callback fired when the enter animation will start.
+     */
+    onEnter?: () => void | undefined;
+    /**
+     * Callback fired when the enter animation is completed.
+     */
+    onEntered?: () => void | undefined;
+    /**
+     * Callback fired when the exit animation will start.
+     */
+    onExit?: () => void | undefined;
+    /**
+     * Callback fired when the exit animation is completed.
+     */
+    onExited?: () => void | undefined;
+    /**
+     * Animation used when the modal opens.
+     */
+    openAnimation?: AnimationUnit[] | undefined;
     /**
      * If `true`, the modal is visible.
      */

package/build/typescript/Modal/index.d.ts

@@ -1,3 +1,4 @@
 export { default, createModalCloseEvent } from './Modal';
 export type { ModalCloseEvent } from './Modal';
-export type { default as ModalProps } from './ModalProps';
+export type { default as ModalProps, AnimationUnit } from './ModalProps';
+export { ANIMATION_TYPE } from './ModalProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.82",
+  "version": "2.0.0-beta.83",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f07255eea37343ebe04cff31bd0db4dd0a0d08e9"
+  "gitHead": "ade918bdbf6082ea7d61be5749d28ff0c6c3300b"
 }

package/src/Accordion/Accordion.tsx

@@ -26,14 +26,10 @@ type AccordionStyles = NamedStylesStringUnion<
     | 'contentView'
 >;
 
-const CONTENT_Y_START = 10;
-const CONTENT_Y_END = 0;
-
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 300 };
-const INITIAL_EXPANDED_DELAY_MILLIS = 400;
-const CONTENT_TRANSLATEY_DELAY_MILLIS = 300;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 100;
 const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
@@ -47,6 +43,7 @@ const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
             paddingHorizontal: theme.spacing(4),
             paddingVertical: theme.spacing(3.5),
             alignItems: 'center',
+            height: 64,
         },
         titleColumn: { flexShrink: 1 },
         subtitle: {
@@ -85,7 +82,6 @@ export default function Accordion(props: AccordionProps) {
 
     const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
     const animatedOpacity = useSharedValue(0);
-    const animatedContentY = useSharedValue(CONTENT_Y_START);
 
     const animatedHeight = useSharedValue(0);
     const [contentHeight, setContentHeight] = useState(0);
@@ -100,7 +96,6 @@ export default function Accordion(props: AccordionProps) {
     }), []);
 
     const animatedContentStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: animatedContentY.value }],
         opacity: animatedOpacity.value,
     }), []);
 
@@ -126,9 +121,6 @@ export default function Accordion(props: AccordionProps) {
         animatedOpacity.value = isExpanded
             ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))
             : withTiming(0, ANIMATION_CONFIG);
-        animatedContentY.value = isExpanded
-            ? withDelay(CONTENT_TRANSLATEY_DELAY_MILLIS, withTiming(CONTENT_Y_END, ANIMATION_CONFIG))
-            : withDelay(ANIMATION_CONFIG.duration as number, withTiming(CONTENT_Y_START, { duration: 0 }));
     }, [isExpanded, contentHeight]);
 
     return (
@@ -143,6 +135,7 @@ export default function Accordion(props: AccordionProps) {
                             children={title}
                             color={'textPrimary'}
                             numberOfLines={1}
+                            disableFontScaling={true}
                         />
 
                         {subTitle ? (
@@ -153,6 +146,8 @@ export default function Accordion(props: AccordionProps) {
                                     style={styles.subtitle}
                                     color={'tertiary'}
                                     children={subTitle}
+                                    numberOfLines={1}
+                                    disableFontScaling={true}
                                 />
                             </React.Fragment>
                         ) : null}

package/src/Dialog/Dialog.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect } from 'react';
-import { useWindowDimensions, Animated, Easing } from 'react-native';
+import React, { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
 import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import Column from '../Column';
-import Modal from '../Modal';
+import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
 import Paper from '../Paper';
-import { useAnimatedValue } from '../hooks';
-import { isNotAndroid12 } from '../utils';
 import { useTheme } from '../styles';
 import type DialogProps from './DialogProps';
 
@@ -22,9 +20,6 @@ type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
 const DIALOG_MAX_WIDTH = 328;
 
-const fadeDuration = 300;
-const fadeAnimationDelay = 50;
-
 const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
     const theme = useTheme();
 
@@ -40,6 +35,7 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
             zIndex: theme.zIndex.dialog,
         },
         paper: {
+            borderRadius: theme.shape.roundnessExtra,
             margin,
             maxWidth: DIALOG_MAX_WIDTH,
             overflow: 'hidden',
@@ -68,6 +64,7 @@ const useStyles: UseStyles<DialogStyles> = function (): DialogStyles {
 
 export default function Dialog(props: DialogProps) {
     const {
+        animationType = ANIMATION_TYPE.SLIDE,
         children,
         fullScreen = false,
         onClose,
@@ -78,38 +75,80 @@ export default function Dialog(props: DialogProps) {
     } = props;
 
     const styles = useStyles();
-    const theme = useTheme();
-    const animatedOpacity = useAnimatedValue(0);
-
-    useEffect(() => {
-        if(!fullScreen){
-            Animated.timing(animatedOpacity, {
-                toValue: visible ? 1 : 0,
-                duration: fadeDuration,
-                delay: visible ? fadeAnimationDelay : 0,
-                easing: Easing.out(Easing.exp),
-                useNativeDriver: isNotAndroid12,
-            }).start();
+
+    const { height: screenHeight } = useWindowDimensions();
+
+    const closeAnimation = useMemo<AnimationUnit[]>(() => {
+        if (animationType === ANIMATION_TYPE.FADE) {
+            return [{
+                toValue: 0,
+                type: ANIMATION_TYPE.FADE,
+            }];
+        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+            return [
+                {
+                    toValue: screenHeight,
+                    type: ANIMATION_TYPE.SLIDE,
+                },
+                {
+                    duration: 150,
+                    toValue: 0,
+                    type: ANIMATION_TYPE.FADE,
+                },
+            ];
+        }
+
+        return [{
+            duration: 150,
+            toValue: screenHeight,
+            type: ANIMATION_TYPE.SLIDE,
+        }];
+    }, [animationType, fullScreen, screenHeight]);
+
+    const openAnimation = useMemo<AnimationUnit[]>(() => {
+        if (animationType === ANIMATION_TYPE.FADE) {
+            return [{
+                toValue: 1,
+                type: ANIMATION_TYPE.FADE,
+            }];
+        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+            return [
+                {
+                    toValue: 0,
+                    type: ANIMATION_TYPE.SLIDE,
+                },
+                {
+                    delay: 50,
+                    duration: 150,
+                    toValue: 1,
+                    type: ANIMATION_TYPE.FADE,
+                },
+            ];
         }
-    }, [fullScreen, visible]);
+
+        return [{
+            toValue: 0,
+            type: ANIMATION_TYPE.SLIDE,
+        }];
+    }, [animationType, fullScreen]);
+
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+
+    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
 
     return (
         <Modal
             animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}
+            closeAnimation={closeAnimation}
+            initialOpacity={initialOpacity}
+            initialTranslateY={initialTranslateY}
             onClose={onClose}
-            exitDuration={fullScreen ? 150 : 300}
+            openAnimation={openAnimation}
             visible={visible}
             style={styles.root}
             {...otherProps}
         >
-            <Animated.View
-                needsOffscreenAlphaCompositing={true}
-                style={{
-                    height: fullScreen ? '100%' : 'auto',
-                    width:  fullScreen ? '100%' : 'auto',
-                    opacity: fullScreen ? 1 : animatedOpacity,
-                }}
-            >
+            <React.Fragment>
                 {topElement ? (
                     <Column style={fullScreen ? undefined : styles.topElementSize}>
                         <Column style={styles.topElementPosition}>
@@ -122,14 +161,13 @@ export default function Dialog(props: DialogProps) {
                     elevation={6}
                     square={fullScreen}
                     style={css([
-                        { borderRadius: fullScreen ? undefined : theme.shape.roundnessExtra },
                         fullScreen ? styles.paperFullScreen : styles.paper,
                         style,
                     ])}
                 >
                     {children}
                 </Paper>
-            </Animated.View>
+            </React.Fragment>
         </Modal>
     );
 };

package/src/Dialog/DialogProps.ts

@@ -1,8 +1,15 @@
 import React from 'react';
 import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
+import { ANIMATION_TYPE } from '../Modal';
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
+    /**
+     * Type of animation used when the dialog opens and closes.
+     * @default 'slide'
+     */
+    animationType?: ANIMATION_TYPE;
+
     /**
      * Dialog children, usually the included sub-components.
      */

package/src/Modal/AnimatedContainer/index.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect } from 'react';
+import { Animated, Easing, Platform, useWindowDimensions } from 'react-native';
+import * as R from 'ramda';
+import { useAnimatedValue } from '../../hooks';
+import { isNotAndroid12 } from '../../utils';
+import type ModalProps from '../ModalProps';
+import { ANIMATION_TYPE, AnimationUnit } from '../ModalProps';
+
+type AnimatedContainerProps = Pick<ModalProps,
+    | 'children'
+    | 'closeAnimation'
+    | 'initialOpacity'
+    | 'initialTranslateY'
+    | 'onEnter'
+    | 'onEntered'
+    | 'onExit'
+    | 'onExited'
+    | 'openAnimation'
+    | 'style'
+    | 'visible'>
+
+const DEFAULT_ANIMATION_CONFIG = {
+    duration: 300,
+    useNativeDriver: isNotAndroid12,
+};
+
+export default function AnimatedContainer(props: AnimatedContainerProps) {
+    const {
+        children,
+        closeAnimation,
+        initialOpacity,
+        initialTranslateY,
+        onEnter,
+        onEntered,
+        onExit,
+        onExited,
+        openAnimation,
+        style,
+        visible,
+    } = props;
+
+    const { height: screenHeight } = useWindowDimensions();
+
+    const opacity = useAnimatedValue(initialOpacity ?? 0);
+
+    const translateY = useAnimatedValue(initialTranslateY ?? screenHeight);
+
+    const convertToCompositeAnimation = useCallback((animationUnit: AnimationUnit) => {
+        const {
+            type,
+            ...others
+        } = animationUnit;
+
+        switch (type) {
+            case ANIMATION_TYPE.FADE:
+                return Animated.timing(opacity, {
+                    ...others,
+                    useNativeDriver: isNotAndroid12,
+                });
+            case ANIMATION_TYPE.SLIDE:
+            default:
+                const easing = others.toValue === screenHeight
+                    ? Easing.in(Easing.ease)
+                    : Platform.OS === 'web'
+                        ? Easing.bezier(0.16, 1, 0.3, 1)
+                        : Easing.out(Easing.exp);
+
+                return Animated.timing(translateY, {
+                    ...others,
+                    easing,
+                    useNativeDriver: isNotAndroid12,
+                });
+        }
+    }, [screenHeight]);
+
+    useEffect(() => {
+        if (visible) {
+            onEnter?.();
+
+            if (R.isNil(openAnimation)) {
+                opacity.setValue(1);
+
+                Animated.timing(translateY, {
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    easing: Platform.OS === 'web'
+                        ? Easing.bezier(0.16, 1, 0.3, 1)
+                        : Easing.out(Easing.exp),
+                    toValue: 0,
+                }).start(({ finished }) => {
+                    if (finished) {
+                        onEntered?.();
+                    }
+                });
+            } else {
+                const convertedAnimation = openAnimation.map((animationUnit) => {
+                    return convertToCompositeAnimation({
+                        ...DEFAULT_ANIMATION_CONFIG,
+                        ...animationUnit,
+                    });
+                });
+
+                Animated.parallel(convertedAnimation).start(({ finished }) => {
+                    if (finished) {
+                        onEntered?.();
+                    }
+                });
+            }
+        } else {
+            onExit?.();
+
+            if (R.isNil(closeAnimation)) {
+                opacity.setValue(1);
+
+                Animated.timing(translateY, {
+                    ...DEFAULT_ANIMATION_CONFIG,
+                    easing: Easing.in(Easing.ease),
+                    toValue: screenHeight,
+                }).start(({ finished }) => {
+                    if (finished) {
+                        onExited?.();
+                    }
+                });
+            } else {
+                const convertedAnimation = closeAnimation.map((animationUnit) => {
+                    return convertToCompositeAnimation({
+                        ...DEFAULT_ANIMATION_CONFIG,
+                        ...animationUnit,
+                    });
+                });
+
+                Animated.parallel(convertedAnimation).start(({ finished }) => {
+                    if (finished) {
+                        onExited?.();
+                    }
+                });
+            }
+        }
+    }, [convertToCompositeAnimation, visible]);
+
+    const animatedStyle = {
+        opacity,
+        transform: [{ translateY }],
+    };
+
+    return (
+        <Animated.View
+            pointerEvents={'box-none'}
+            style={[
+                animatedStyle,
+                style,
+            ]}
+        >
+            {children}
+        </Animated.View>
+    );
+}