@hero-design/rn 8.33.2 → 8.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.33.2",
+  "version": "8.34.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.33.2",
+    "@hero-design/colors": "8.34.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -34,6 +34,7 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -45,7 +46,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.33.2",
+    "@hero-design/eslint-plugin": "8.34.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +62,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.33.2",
+    "eslint-config-hd": "8.34.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.33.2",
+    "prettier-config-hd": "8.34.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -34,6 +34,7 @@ export default {
     'react-native-pager-view',
     'react-native-vector-icons',
     'react-native-linear-gradient',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({

package/src/components/Carousel/CardCarousel.tsx

@@ -248,3 +248,5 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     );
   }
 );
+
+CardCarousel.displayName = 'CardCarousel';

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expense":59061,"eye-circle":59062,"eye-invisible":59063,"eye":59064,"face-meh":59065,"face-sad":59066,"face-smiley":59067,"feed":59068,"feedbacks":59069,"file-certified":59070,"file-clone":59071,"file-copy":59072,"file-csv":59073,"file-dispose":59074,"file-doc":59075,"file-excel":59076,"file-export":59077,"file-lock":59078,"file-pdf":59079,"file-powerpoint":59080,"file-search":59081,"file-secured":59082,"file-sheets":59083,"file-slide":59084,"file-verified":59085,"file-word":59086,"file":59087,"filter":59088,"folder-user":59089,"folder":59090,"format-bold":59091,"format-heading1":59092,"format-heading2":59093,"format-italic":59094,"format-list-bulleted":59095,"format-list-numbered":59096,"format-underlined":59097,"funnel-filter":59098,"global-dollar":59099,"globe":59100,"graduation-cap":59101,"graph":59102,"happy-sun":59103,"health-bag":59104,"heart":59105,"home":59106,"image":59107,"import":59108,"incident-siren":59109,"instapay":59110,"list":59111,"loading-2":59112,"loading":59113,"location":59114,"lock":59115,"looks-one":59116,"looks-two":59117,"media-content":59118,"menu":59119,"money-notes":59120,"moneybag":59121,"moon":59122,"multiple-stars":59123,"multiple-users":59124,"node":59125,"open-folder":59126,"paperclip":59127,"payment-summary":59128,"pencil":59129,"phone":59130,"piggy-bank":59131,"plane-up":59132,"plane":59133,"play-circle":59134,"print":59135,"raising-hands":59136,"reply-arrow":59137,"reply":59138,"reschedule":59139,"rostering":59140,"save":59141,"schedule-send":59142,"schedule":59143,"search-person":59144,"send":59145,"speaker-active":59146,"speaker":59147,"star-award":59148,"star-badge":59149,"star-circle":59150,"star-medal":59151,"star":59152,"steps-circle":59153,"stopwatch":59154,"suitcase":59155,"surfing":59156,"survey":59157,"swag-pillar-benefit":59158,"swag-pillar-career":59159,"swag-pillar-money":59160,"swag-pillar-work":59161,"swag":59162,"switch":59163,"tag":59164,"target":59165,"teams":59166,"timesheet":59167,"touch-id":59168,"trash-bin":59169,"unlock":59170,"user":59171,"video-1":59172,"video-2":59173,"wallet":59174,"warning":59175,"activate-outlined":59176,"add-credit-card-outlined":59177,"add-person-outlined":59178,"add-section-outlined":59179,"add-time-outlined":59180,"add":59181,"adjustment-outlined":59182,"ai-outlined":59183,"alignment-2-outlined":59184,"alignment-outlined":59185,"all-caps":59186,"arrow-down":59187,"arrow-downwards":59188,"arrow-left":59189,"arrow-leftwards":59190,"arrow-right":59191,"arrow-rightwards":59192,"arrow-up":59193,"arrow-upwards":59194,"article-outlined":59195,"at-sign":59196,"auto-graph-outlined":59197,"beer-outlined":59198,"bell-active-outlined":59199,"bell-outlined":59200,"bell-slash-outlined":59201,"billing-outlined":59202,"body-outlined":59203,"bold":59204,"book-outlined":59205,"bookmark-added-outlined":59206,"bookmark-outlined":59207,"box-check-outlined":59208,"box-outlined":59209,"bullet-points":59210,"cake-outlined":59211,"calendar-dates-outlined":59212,"calendar-star-outlined":59213,"call-split-outlined":59214,"camera-outlined":59215,"cancel":59216,"car-forward-outlined":59217,"charging-station-outlined":59218,"chat-bubble-outlined":59219,"chat-unread-outlined":59220,"checkmark":59221,"circle-add-outlined":59222,"circle-cancel-outlined":59223,"circle-down-outlined":59224,"circle-info-outlined":59225,"circle-left-outlined":59226,"circle-ok-outlined":59227,"circle-question-outlined":59228,"circle-remove-outlined":59229,"circle-right-outlined":59230,"circle-up-outlined":59231,"circle-warning-outlined":59232,"clock-2-outlined":59233,"clock-outlined":59234,"cog-outlined":59235,"coin-outlined":59236,"coin-super-outlined":59237,"comment-outlined":59238,"contacts-outlined":59239,"contacts-user-outlined":59240,"credit-card-outlined":59241,"cup-outlined":59242,"dentistry-outlined":59243,"direction-arrows-outlined":59244,"directory-outlined":59245,"document-outlined":59246,"dollar-box-outlined":59247,"dollar-card-outlined":59248,"dollar-coin-shine-outlined":59249,"dollar-credit-card-outlined":59250,"dollar-sign":59251,"double-buildings-outlined":59252,"double-left-arrows":59253,"double-right-arrows":59254,"download-box-outlined":59255,"download-outlined":59256,"edit-template-outlined":59257,"email-outlined":59258,"enter-arrow":59259,"envelope-outlined":59260,"expense-outlined":59261,"explore-outlined":59262,"extension-outlined":59263,"external-link":59264,"eye-invisible-outlined":59265,"eye-outlined":59266,"face-id":59267,"face-meh-outlined":59268,"face-open-smiley-outlined":59269,"face-sad-outlined":59270,"face-smiley-outlined":59271,"fastfood-outlined":59272,"feed-outlined":59273,"file-certified-outlined":59274,"file-clone-outlined":59275,"file-copy-outlined":59276,"file-dispose-outlined":59277,"file-dollar-certified-outlined":59278,"file-dollar-outlined":59279,"file-download-outlined":59280,"file-export-outlined":59281,"file-lock-outlined":59282,"file-outlined":59283,"file-search-outlined":59284,"file-secured-outlined":59285,"file-statutory-outlined":59286,"file-verified-outlined":59287,"filter-outlined":59288,"folder-outlined":59289,"folder-user-outlined":59290,"form-outlined":59291,"funnel-filter-outline":59292,"graph-outlined":59293,"hand-holding-user-outlined":59294,"happy-sun-outlined":59295,"health-bag-outlined":59296,"heart-outlined":59297,"home-active-outlined":59298,"home-outlined":59299,"id-card-outlined":59300,"image-outlined":59301,"import-outlined":59302,"instapay-outlined":59303,"italic":59304,"link-1":59305,"link-2":59306,"list-outlined":59307,"live-help-outlined":59308,"location-on-outlined":59309,"location-outlined":59310,"lock-outlined":59311,"locked-file-outlined":59312,"log-out":59313,"media-content-outlined":59314,"menu-close":59315,"menu-expand":59316,"menu-fold-outlined":59317,"menu-unfold-outlined":59318,"moneybag-outlined":59319,"moon-outlined":59320,"more-horizontal":59321,"more-vertical":59322,"multiple-folders-outlined":59323,"multiple-users-outlined":59324,"near-me-outlined":59325,"node-outlined":59326,"number-points":59327,"number":59328,"overview-outlined":59329,"payment-summary-outlined":59330,"payslip-outlined":59331,"pencil-outlined":59332,"percentage":59333,"phone-outlined":59334,"piggy-bank-outlined":59335,"plane-outlined":59336,"play-circle-outlined":59337,"print-outlined":59338,"qr-code-outlined":59339,"qualification-outlined":59340,"re-assign":59341,"redeem":59342,"refresh":59343,"remove":59344,"reply-outlined":59345,"restart":59346,"return-arrow":59347,"rostering-outlined":59348,"save-outlined":59349,"schedule-outlined":59350,"search-outlined":59351,"search-secured-outlined":59352,"send-outlined":59353,"share-1":59354,"share-2":59355,"share-outlined":59356,"show-chart-outlined":59357,"single-down-arrow":59358,"single-left-arrow":59359,"single-right-arrow":59360,"single-up-arrow":59361,"speaker-active-outlined":59362,"speaker-outlined":59363,"star-circle-outlined":59364,"star-outlined":59365,"stopwatch-outlined":59366,"strikethrough":59367,"styler-outlined":59368,"suitcase-clock-outlined":59369,"suitcase-outlined":59370,"survey-outlined":59371,"switch-outlined":59372,"sync":59373,"tag-outlined":59374,"target-outlined":59375,"tennis-outlined":59376,"ticket-outlined":59377,"timesheet-outlined":59378,"today-outlined":59379,"transfer":59380,"trash-bin-outlined":59381,"umbrela-outlined":59382,"unavailable":59383,"underline":59384,"union-outlined":59385,"unlock-outlined":59386,"upload-outlined":59387,"user-circle-outlined":59388,"user-gear-outlined":59389,"user-outlined":59390,"user-rectangle-outlined":59391,"video-1-outlined":59392,"video-2-outlined":59393,"volunteer-outlined":59394,"wallet-outlined":59395}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expense":59061,"eye-circle":59062,"eye-invisible":59063,"eye":59064,"face-meh":59065,"face-sad":59066,"face-smiley":59067,"feed":59068,"feedbacks":59069,"file-certified":59070,"file-clone":59071,"file-copy":59072,"file-csv":59073,"file-dispose":59074,"file-doc":59075,"file-excel":59076,"file-export":59077,"file-lock":59078,"file-pdf":59079,"file-powerpoint":59080,"file-search":59081,"file-secured":59082,"file-sheets":59083,"file-slide":59084,"file-verified":59085,"file-word":59086,"file":59087,"filter":59088,"folder-user":59089,"folder":59090,"format-bold":59091,"format-heading1":59092,"format-heading2":59093,"format-italic":59094,"format-list-bulleted":59095,"format-list-numbered":59096,"format-underlined":59097,"funnel-filter":59098,"global-dollar":59099,"globe":59100,"graduation-cap":59101,"graph":59102,"happy-sun":59103,"health-bag":59104,"heart":59105,"home":59106,"image":59107,"import":59108,"incident-siren":59109,"instapay":59110,"list":59111,"loading-2":59112,"loading":59113,"location":59114,"lock":59115,"looks-one":59116,"looks-two":59117,"media-content":59118,"menu":59119,"money-notes":59120,"moneybag":59121,"moon":59122,"multiple-stars":59123,"multiple-users":59124,"node":59125,"open-folder":59126,"paperclip":59127,"payment-summary":59128,"pencil":59129,"phone":59130,"piggy-bank":59131,"plane-up":59132,"plane":59133,"play-circle":59134,"print":59135,"raising-hands":59136,"reply-arrow":59137,"reply":59138,"reschedule":59139,"rostering":59140,"save":59141,"schedule-send":59142,"schedule":59143,"search-person":59144,"send":59145,"speaker-active":59146,"speaker":59147,"star-award":59148,"star-badge":59149,"star-circle":59150,"star-medal":59151,"star":59152,"steps-circle":59153,"stopwatch":59154,"suitcase":59155,"surfing":59156,"survey":59157,"swag-pillar-benefit":59158,"swag-pillar-career":59159,"swag-pillar-money":59160,"swag-pillar-work":59161,"swag":59162,"switch":59163,"tag":59164,"target":59165,"teams":59166,"timesheet":59167,"touch-id":59168,"trash-bin":59169,"unlock":59170,"user":59171,"video-1":59172,"video-2":59173,"wallet":59174,"warning":59175,"activate-outlined":59176,"add-credit-card-outlined":59177,"add-person-outlined":59178,"add-section-outlined":59179,"add-time-outlined":59180,"add":59181,"adjustment-outlined":59182,"ai-outlined":59183,"alignment-2-outlined":59184,"alignment-outlined":59185,"all-caps":59186,"arrow-down":59187,"arrow-downwards":59188,"arrow-left":59189,"arrow-leftwards":59190,"arrow-right":59191,"arrow-rightwards":59192,"arrow-up":59193,"arrow-upwards":59194,"article-outlined":59195,"at-sign":59196,"auto-graph-outlined":59197,"beer-outlined":59198,"bell-active-outlined":59199,"bell-outlined":59200,"bell-slash-outlined":59201,"billing-outlined":59202,"body-outlined":59203,"bold":59204,"book-outlined":59205,"bookmark-added-outlined":59206,"bookmark-outlined":59207,"box-check-outlined":59208,"box-outlined":59209,"bullet-points":59210,"cake-outlined":59211,"calendar-dates-outlined":59212,"calendar-star-outlined":59213,"call-outlined":59214,"call-split-outlined":59215,"camera-outlined":59216,"cancel":59217,"car-forward-outlined":59218,"charging-station-outlined":59219,"chat-bubble-outlined":59220,"chat-unread-outlined":59221,"checkmark":59222,"circle-add-outlined":59223,"circle-cancel-outlined":59224,"circle-down-outlined":59225,"circle-info-outlined":59226,"circle-left-outlined":59227,"circle-ok-outlined":59228,"circle-question-outlined":59229,"circle-remove-outlined":59230,"circle-right-outlined":59231,"circle-up-outlined":59232,"circle-warning-outlined":59233,"clock-2-outlined":59234,"clock-outlined":59235,"cog-outlined":59236,"coin-outlined":59237,"coin-super-outlined":59238,"comment-outlined":59239,"contacts-outlined":59240,"contacts-user-outlined":59241,"credit-card-outlined":59242,"cup-outlined":59243,"dentistry-outlined":59244,"direction-arrows-outlined":59245,"directory-outlined":59246,"document-outlined":59247,"dollar-box-outlined":59248,"dollar-card-outlined":59249,"dollar-coin-shine-outlined":59250,"dollar-credit-card-outlined":59251,"dollar-sign":59252,"double-buildings-outlined":59253,"double-left-arrows":59254,"double-right-arrows":59255,"download-box-outlined":59256,"download-outlined":59257,"edit-template-outlined":59258,"email-outlined":59259,"enter-arrow":59260,"envelope-outlined":59261,"expense-outlined":59262,"explore-outlined":59263,"extension-outlined":59264,"external-link":59265,"eye-invisible-outlined":59266,"eye-outlined":59267,"face-id":59268,"face-meh-outlined":59269,"face-open-smiley-outlined":59270,"face-sad-outlined":59271,"face-smiley-outlined":59272,"fastfood-outlined":59273,"feed-outlined":59274,"file-certified-outlined":59275,"file-clone-outlined":59276,"file-copy-outlined":59277,"file-dispose-outlined":59278,"file-dollar-certified-outlined":59279,"file-dollar-outlined":59280,"file-download-outlined":59281,"file-export-outlined":59282,"file-lock-outlined":59283,"file-outlined":59284,"file-search-outlined":59285,"file-secured-outlined":59286,"file-statutory-outlined":59287,"file-verified-outlined":59288,"filter-outlined":59289,"folder-outlined":59290,"folder-user-outlined":59291,"form-outlined":59292,"funnel-filter-outline":59293,"graph-outlined":59294,"hand-holding-user-outlined":59295,"happy-sun-outlined":59296,"health-bag-outlined":59297,"heart-outlined":59298,"home-active-outlined":59299,"home-outlined":59300,"id-card-outlined":59301,"image-outlined":59302,"import-outlined":59303,"instapay-outlined":59304,"italic":59305,"link-1":59306,"link-2":59307,"list-outlined":59308,"live-help-outlined":59309,"location-on-outlined":59310,"location-outlined":59311,"lock-outlined":59312,"locked-file-outlined":59313,"log-out":59314,"mail-outlined":59315,"media-content-outlined":59316,"menu-close":59317,"menu-expand":59318,"menu-fold-outlined":59319,"menu-unfold-outlined":59320,"moneybag-outlined":59321,"moon-outlined":59322,"more-horizontal":59323,"more-vertical":59324,"multiple-folders-outlined":59325,"multiple-users-outlined":59326,"near-me-outlined":59327,"node-outlined":59328,"number-points":59329,"number":59330,"overview-outlined":59331,"payment-summary-outlined":59332,"payslip-outlined":59333,"pencil-outlined":59334,"percentage":59335,"phone-outlined":59336,"piggy-bank-outlined":59337,"plane-outlined":59338,"play-circle-outlined":59339,"print-outlined":59340,"qr-code-outlined":59341,"qualification-outlined":59342,"re-assign":59343,"redeem":59344,"refresh":59345,"remove":59346,"reply-outlined":59347,"restart":59348,"return-arrow":59349,"rostering-outlined":59350,"save-outlined":59351,"schedule-outlined":59352,"search-outlined":59353,"search-secured-outlined":59354,"send-outlined":59355,"share-1":59356,"share-2":59357,"share-outlined":59358,"show-chart-outlined":59359,"single-down-arrow":59360,"single-left-arrow":59361,"single-right-arrow":59362,"single-up-arrow":59363,"speaker-active-outlined":59364,"speaker-outlined":59365,"star-circle-outlined":59366,"star-outlined":59367,"stopwatch-outlined":59368,"strikethrough":59369,"styler-outlined":59370,"suitcase-clock-outlined":59371,"suitcase-outlined":59372,"survey-outlined":59373,"switch-outlined":59374,"sync":59375,"tag-outlined":59376,"target-outlined":59377,"tennis-outlined":59378,"ticket-outlined":59379,"timesheet-outlined":59380,"today-outlined":59381,"transfer":59382,"trash-bin-outlined":59383,"umbrela-outlined":59384,"unavailable":59385,"underline":59386,"union-outlined":59387,"unlock-outlined":59388,"upload-outlined":59389,"user-circle-outlined":59390,"user-gear-outlined":59391,"user-outlined":59392,"user-rectangle-outlined":59393,"video-1-outlined":59394,"video-2-outlined":59395,"volunteer-outlined":59396,"wallet-outlined":59397}

package/src/components/Icon/IconList.ts

@@ -214,6 +214,7 @@ const IconList = [
   'cake-outlined',
   'calendar-dates-outlined',
   'calendar-star-outlined',
+  'call-outlined',
   'call-split-outlined',
   'camera-outlined',
   'cancel',
@@ -314,6 +315,7 @@ const IconList = [
   'lock-outlined',
   'locked-file-outlined',
   'log-out',
+  'mail-outlined',
   'media-content-outlined',
   'menu-close',
   'menu-expand',

package/src/components/Modal/ModalContentWrapper.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+type ModalContentWrapperProps = {
+  children: React.ReactElement;
+  visible?: boolean;
+  onShow?: () => void;
+  testID?: string;
+  animationType?: 'none' | 'slide' | 'fade';
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+};
+
+export type ModalContentWrapperHandler = {
+  hide: (callback?: () => void) => void;
+};
+
+const windowHeight = Dimensions.get('window').height;
+const defaultAnimationConfig = {
+  easing: Easing.inOut(Easing.cubic),
+  duration: 400,
+  useNativeDriver: Platform.OS !== 'web',
+};
+
+const ModalContentWrapper = forwardRef<
+  ModalContentWrapperHandler,
+  ModalContentWrapperProps
+>(
+  (
+    {
+      animationType,
+      children,
+      testID,
+      onShow,
+      style,
+      visible,
+      animated = true,
+    },
+    ref
+  ) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    const modalAnimation = animatedValue.interpolate(
+      animationType === 'fade'
+        ? {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }
+        : {
+            inputRange: [0, 1],
+            outputRange: [windowHeight, 0],
+          }
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        hide: (callback) => {
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            ...defaultAnimationConfig,
+          }).start(callback);
+        },
+      }),
+      [animatedValue]
+    );
+
+    React.useEffect(() => {
+      // Hiding animation will be called from the modal component
+      if (visible) {
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          ...defaultAnimationConfig,
+          // Prevent animation when updating the modal content
+          duration: animated ? defaultAnimationConfig.duration : 0,
+        }).start(() => {
+          onShow?.();
+        });
+      }
+    }, [visible, animatedValue, onShow, animated]);
+
+    return (
+      <Animated.View
+        testID={testID}
+        style={[
+          style,
+          {
+            ...(animationType === 'fade' ? { opacity: modalAnimation } : {}),
+            ...(animationType === 'slide'
+              ? {
+                  transform: [{ translateY: modalAnimation }],
+                }
+              : {}),
+          },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+
+ModalContentWrapper.displayName = 'ModalContentWrapper';
+
+export default ModalContentWrapper;

package/src/components/Modal/ModalPresenter/ModalPresenter.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type ModalPresenterHandles = {
+  animatedOut: (completion?: () => void) => void;
+};
+export type ModalDismissFunc = (onDismiss?: () => void) => void;
+export type ModalUpdateFunc = (content: React.ReactNode) => void;
+
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type ModalHandler = {
+  /**
+   * Same `dismiss` function as in `ModalContentProps`.
+   */
+  dismiss: ModalDismissFunc;
+  /**
+   * Same `update` function as in `ModalContentProps`.
+   */
+  update: ModalUpdateFunc;
+};
+
+const ModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+    const theme = useTheme();
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill}>
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              backgroundColor: `${theme.colors.overlayGlobalSurface}66`, // 66 = 40% opacity as suggested by the mobile color guidelines
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+
+export const showModal = (content: React.ReactNode): ModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: ModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: ModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </ModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </ModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+ModalPresenter.displayName = 'ModalPresenter';
+
+export default ModalPresenter;

package/src/components/Modal/ModalPresenter/index.tsx

@@ -0,0 +1,9 @@
+import {
+  ModalDismissFunc,
+  ModalHandler,
+  showModal,
+  ModalPresenterHandles,
+} from './ModalPresenter';
+
+export type { ModalDismissFunc, ModalHandler, ModalPresenterHandles };
+export { showModal };

package/src/components/Modal/ModalProvider.tsx

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+const ModalProvider = ({ children }: { children: ReactNode }) => {
+  return <RootSiblingParent>{children}</RootSiblingParent>;
+};
+
+export default ModalProvider;

package/src/components/Modal/__tests__/ModalContentWrapper.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalContentWrapper from '../ModalContentWrapper';
+import Typography from '../../Typography';
+
+describe('ModalContentWrapper', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalContentWrapper
+        testID="modal-content-wrapper"
+        style={{ backgroundColor: 'blue' }}
+        visible
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalContentWrapper>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+});

package/src/components/Modal/__tests__/ModalPresenter.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalPresenter, {
+  ModalPresenterHandles,
+} from '../ModalPresenter/ModalPresenter';
+import Typography from '../../Typography';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.spring = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('ModalPresenter', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalPresenter
+        testID="modal-presenter"
+        style={{ backgroundColor: 'blue' }}
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('allow using ref', () => {
+    const ref = React.createRef<ModalPresenterHandles>();
+    const completion = jest.fn();
+
+    renderWithTheme(
+      <ModalPresenter ref={ref}>
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    ref.current?.animatedOut(completion);
+    expect(completion).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/__tests__/__snapshots__/ModalContentWrapper.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalContentWrapper should render correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "blue",
+    }
+  }
+  testID="modal-content-wrapper"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Modal content
+  </Text>
+</View>
+`;

package/src/components/Modal/__tests__/__snapshots__/ModalPresenter.spec.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalPresenter should render correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "blue",
+        "height": "100%",
+        "justifyContent": "center",
+        "opacity": 0,
+        "width": "100%",
+      }
+    }
+    testID="modal-presenter"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Modal content
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Modal/__tests__/index.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.timing = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('Modal', () => {
+  it('onShow should be called correctly', () => {
+    const onShow = jest.fn();
+
+    renderWithTheme(
+      <Modal onShow={onShow} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+
+    expect(onShow).toHaveBeenCalled();
+  });
+
+  it('onRequestClose should be called correctly', () => {
+    const onRequestClose = jest.fn();
+
+    renderWithTheme(
+      <Modal onRequestClose={onRequestClose} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+});