@procivis/one-react-native-components 0.1.63

package/src/accessibility/accessibility.ts

@@ -0,0 +1,215 @@
+import { NavigationProp, NavigationState, useIsFocused, useNavigation } from '@react-navigation/native';
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, EmitterSubscription, findNodeHandle, Platform } from 'react-native';
+
+/**
+ * Global transformer of text for Voice-Over
+ * @param {string} text (Visible) text to be announced
+ * @returns {string} Text to be read-out by Voice-Over
+ */
+export type AccessibilityTextTransformer = (text: string) => string;
+let textTransformer: AccessibilityTextTransformer | null = null;
+export function setAccessibilityTextTransformer(transformer: AccessibilityTextTransformer | null) {
+  textTransformer = transformer;
+}
+export function transformAccessibilityText(text: string) {
+  return textTransformer && text ? textTransformer(text) : text;
+}
+
+/**
+ * Make element accessible after navigation transition is done
+ * @returns {boolean} flag to be used as `accessible` prop on the target component(s)
+ */
+export function useAccessibleAfterTransition<
+  TNavigationProp extends NavigationProp<
+    Record<string, any>,
+    string,
+    NavigationState<Record<string, any>>,
+    {},
+    { transitionEnd: {} }
+  >,
+>() {
+  const navigation = useNavigation<TNavigationProp>();
+  const [accessible, setAccessible] = useState(false);
+
+  const isFocused = useIsFocused();
+  useEffect(() => {
+    if (!isFocused) {
+      setAccessible(false);
+      return undefined;
+    }
+    const unsubscribe = navigation.addListener('transitionEnd', () => setAccessible(true));
+    // fallback for cases when transition doesn't happen (e.g. forceful screen re-render)
+    const timeout = setTimeout(() => setAccessible(true), 500);
+    return () => {
+      unsubscribe();
+      clearTimeout(timeout);
+    };
+  }, [navigation, isFocused]);
+
+  return isFocused && accessible;
+}
+
+/**
+ * Query whether the current screen is NOT transitioning
+ * @returns {boolean} flag signifying whether the current screen is NOT in a transition (either entering or leaving)
+ */
+export function useIsOutsideTransition<
+  TNavigationProp extends NavigationProp<
+    Record<string, any>,
+    string,
+    NavigationState<Record<string, any>>,
+    {},
+    { transitionStart: {}; transitionEnd: {} }
+  >,
+>() {
+  const navigation = useNavigation<TNavigationProp>();
+  const [inTransition, setInTransition] = useState<boolean>(true);
+
+  const isFocused = useIsFocused();
+  const focused = useRef(isFocused);
+  focused.current = isFocused;
+
+  useEffect(() => {
+    const unsubscribeStart = navigation.addListener('transitionStart', () => setInTransition(true));
+    const unsubscribeEnd = navigation.addListener('transitionEnd', () => {
+      if (focused.current) {
+        setInTransition(false);
+      }
+    });
+    return () => {
+      unsubscribeStart();
+      unsubscribeEnd();
+    };
+  }, [navigation]);
+
+  useEffect(() => {
+    if (!isFocused) {
+      return undefined;
+    }
+
+    setInTransition(true);
+    // fallback for cases when transition callback doesn't happen (e.g. forceful screen re-render)
+    const timeout = setTimeout(() => setInTransition(false), 500);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isFocused]);
+
+  return isFocused && !inTransition;
+}
+
+/**
+ * Focuses an element for accessibility
+ * @param component component ref
+ * @note Disabled on android as it is not reliable
+ */
+export const focusAccessibility = (component?: React.Component | React.ComponentClass | null) => {
+  if (Platform.OS === 'ios' && component) {
+    const nodeHandle = findNodeHandle(component);
+    if (nodeHandle) {
+      AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+    }
+  }
+};
+
+/**
+ * Focuses an element for accessibility
+ * @param {boolean} focused Focusing happens when this changes to `true`
+ * @returns reference to be used with the target element
+ */
+export const useAccessibilityFocus = <T extends React.Component | React.ComponentClass>(focused: boolean = true) => {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (focused) {
+      focusAccessibility(ref.current);
+    }
+  }, [focused]);
+
+  return ref;
+};
+
+/**
+ * Posts a screen-reader/voice-over announcement
+ * @param {string} message Announcement message
+ * * if `null` passed, it resets the cached announcement and the same message can be re-announced again
+ * @returns {boolean} When the announcement is successfully finished (only supported on iOS), false otherwise
+ * @note Use {@link setAccessibilityTextTransformer} to apply text transformation for the read-out text
+ */
+export const useAccessibilityAnnouncement = (message?: string | null): boolean => {
+  const announcement = message ? transformAccessibilityText(message) : message;
+  const [announcementFinished, setAnnouncementFinished] = useState<string>();
+  useEffect(() => {
+    if (announcement === null) {
+      // explicitly clearing cached state
+      setAnnouncementFinished(undefined);
+    }
+
+    if (!announcement) {
+      return undefined;
+    }
+
+    let subscription: EmitterSubscription;
+    const unsubscribe = () => subscription?.remove();
+    if (Platform.OS === 'ios') {
+      let retries = 0;
+      subscription = AccessibilityInfo.addEventListener(
+        'announcementFinished',
+        ({ announcement: finished, success }) => {
+          if (finished === announcement) {
+            if (success) {
+              setAnnouncementFinished(announcement);
+              unsubscribe();
+            } else if (retries++ < 2) {
+              // when the automatic voice-over cancels the first try (e.g. after screen transition), let's attempt again one more time
+              AccessibilityInfo.announceForAccessibility(announcement);
+            } else {
+              unsubscribe();
+            }
+          }
+        },
+      );
+    }
+
+    AccessibilityInfo.announceForAccessibility(announcement);
+    return unsubscribe;
+  }, [announcement]);
+
+  return Boolean(announcement && announcementFinished === announcement);
+};
+
+/**
+ * Posts a screen-reader/voice-over announcement
+ * @param {string} message Announcement message
+ * @param {boolean} waitForPreviousAnnouncement When a new message appears before the previous announcement if finished:
+ *   - `true`: postpone the new message to be announced after the previous message(s)
+ *   - `false` (default): cancel the previous announcement and start the new message
+ * @returns {boolean} When all announcements are finished (only supported on iOS), false otherwise
+ * @see {@link useAccessibilityAnnouncement} for further info
+ */
+export const useAccessibilityAnnouncementCumulative = (
+  message?: string,
+  waitForPreviousAnnouncement?: boolean,
+): boolean => {
+  // waiting only possible on iOS
+  const wait = Platform.OS === 'ios' && waitForPreviousAnnouncement;
+
+  const [announcements, setAnnouncements] = useState<string[]>([]);
+  useEffect(() => {
+    if (message) {
+      setAnnouncements((prev) => [...prev, message]);
+    }
+  }, [message]);
+
+  const nextAnnouncement = wait ? announcements[0] : message;
+  const finished = useAccessibilityAnnouncement(nextAnnouncement);
+
+  useEffect(() => {
+    if (finished) {
+      setAnnouncements((prev) => prev.filter((m) => m !== nextAnnouncement));
+    }
+  }, [nextAnnouncement, finished]);
+
+  return wait ? !announcements.length : finished;
+};

package/src/accessibility/accessibilityHistory.tsx

@@ -0,0 +1,77 @@
+import { useRoute } from '@react-navigation/native';
+import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { useForwardedRef } from '../utils/ref';
+import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
+
+type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
+interface AccessibilityRefContextValue {
+  setRef: (route: string, ref: AccessibilityRefComponent) => void;
+  getRef: (route: string) => AccessibilityRefComponent;
+}
+
+const accessibilityFocusHistoryContext = React.createContext<AccessibilityRefContextValue>({
+  setRef: () => {},
+  getRef: () => null,
+});
+
+/**
+ * Adds app support for accessibility focus history
+ */
+export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const Provider = accessibilityFocusHistoryContext.Provider;
+  const refs = useRef<Record<string, AccessibilityRefComponent>>({});
+  const setRef = useCallback((route: string, ref: AccessibilityRefComponent) => {
+    refs.current[route] = ref;
+  }, []);
+  const getRef = useCallback((route: string) => {
+    return refs.current[route] ?? null;
+  }, []);
+  const value = useMemo(() => ({ setRef, getRef }), [getRef, setRef]);
+  return <Provider value={value}>{children}</Provider>;
+};
+
+/**
+ * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation
+ * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
+ */
+export const useAccessibilityFocusHistory = <
+  Component extends React.Component<any> | React.ComponentClass<any>,
+  OnPress extends (...args: never[]) => void = () => void,
+>(
+  pressHandler: OnPress | undefined,
+  passedRef?: React.Ref<Component>,
+) => {
+  const [forwardedRef, refObject] = useForwardedRef<Component>(passedRef);
+
+  const historyContext = useContext(accessibilityFocusHistoryContext);
+  const routeKey = useRoute().key;
+
+  const previouslyPressed = useRef(false);
+  const outsideTransition = useAccessibleAfterTransition();
+
+  useEffect(() => {
+    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;
+    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {
+      focusAccessibility(refObject.current);
+    }
+  }, [historyContext, outsideTransition, refObject, routeKey]);
+
+  useEffect(() => {
+    if (outsideTransition) {
+      previouslyPressed.current = false;
+    }
+  }, [outsideTransition]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onPress = useCallback(
+    ((...args) => {
+      previouslyPressed.current = true;
+      historyContext.setRef(routeKey, refObject.current);
+      return pressHandler?.(...args);
+    }) as OnPress,
+    [historyContext, routeKey, refObject, pressHandler],
+  );
+
+  return { onPress, ref: forwardedRef };
+};

package/src/accessibility/accessibilityHistoryWrappers.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable no-restricted-imports */
+import React, { FC, ForwardedRef, forwardRef } from 'react';
+import {
+  GestureResponderEvent,
+  Pressable as RNPressable,
+  PressableProps,
+  TouchableHighlight as RNTouchableHighlight,
+  TouchableHighlightProps,
+  TouchableOpacity as RNTouchableOpacity,
+  TouchableOpacityProps,
+  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
+  TouchableWithoutFeedbackProps,
+  View,
+} from 'react-native';
+
+import { useAccessibilityFocusHistory } from './accessibilityHistory';
+
+type RNOnPress = (event: GestureResponderEvent) => void;
+interface OnPressProps {
+  onPress?: RNOnPress | null;
+}
+
+const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.Component>(
+  C: React.ComponentType<ComponentProps>,
+  displayName: string,
+) => {
+  type ForwardedProps = ComponentProps & {
+    forwardedRef: ForwardedRef<RefType>;
+  };
+
+  const ComponentWithAccessibilityFocusHistory: FC<ForwardedProps> = ({
+    forwardedRef,
+    onPress: originalOnPress,
+    ...props
+  }) => {
+    const { ref, onPress } = useAccessibilityFocusHistory<RefType, RNOnPress>(
+      originalOnPress ?? undefined,
+      forwardedRef,
+    );
+    // @ts-ignore
+    return <C ref={ref} onPress={onPress} {...props} />;
+  };
+
+  const Forwarded = forwardRef<RefType, ComponentProps>((props, ref) => (
+    <ComponentWithAccessibilityFocusHistory {...props} forwardedRef={ref} />
+  ));
+  Forwarded.displayName = displayName;
+
+  return Forwarded;
+};
+
+/**
+ * Wrappers of RN touchable components with accessibilty focus history support
+ */
+
+export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, RNTouchableOpacity>(
+  RNTouchableOpacity,
+  'TouchableOpacity',
+);
+export const TouchableWithoutFeedback = WithAccessibilityFocusHistory<
+  TouchableWithoutFeedbackProps,
+  RNTouchableWithoutFeedback
+>(RNTouchableWithoutFeedback, 'TouchableWithoutFeedback');
+export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, RNTouchableHighlight>(
+  RNTouchableHighlight,
+  'TouchableHighlight',
+);
+export const Pressable = WithAccessibilityFocusHistory<PressableProps, View>(RNPressable, 'Pressable');
+
+type WrapperRefType<C extends React.ForwardRefExoticComponent<React.RefAttributes<any>>> =
+  C extends React.ForwardRefExoticComponent<React.RefAttributes<infer Ref>> ? Ref : never;
+
+/**
+ * Ref types to be used in forwardRef for the wrappers
+ */
+
+export type TouchableOpacityRef = WrapperRefType<typeof TouchableOpacity>;
+export type TouchableWithoutFeedbackRef = WrapperRefType<typeof TouchableWithoutFeedback>;
+export type TouchableHighlightRef = WrapperRefType<typeof TouchableHighlight>;
+export type PressableRef = WrapperRefType<typeof Pressable>;

package/src/accessibility/accessibilityLanguage.tsx

@@ -0,0 +1,66 @@
+import React, { FC, PropsWithChildren, useContext, useMemo } from 'react';
+
+import { AccessibilityLanguageFile, getAccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
+
+export type AccessibilityLanguageFileEntryKey = keyof AccessibilityLanguageFile;
+type AccessibilityLanguageTranslate = (
+  entryKey: AccessibilityLanguageFileEntryKey,
+  params?: Record<string, string | number>,
+) => string;
+
+const AccessibilityLanguageContext = React.createContext<AccessibilityLanguageTranslate | undefined>(undefined);
+
+export interface AccessibilityLanguageProviderProps {
+  language: SupportedAccessibilityLanguage;
+  overrides?: Partial<AccessibilityLanguageFile> | AccessibilityLanguageTranslate;
+}
+
+const Provider = AccessibilityLanguageContext.Provider;
+
+/**
+ * Adds app support for accessibility language
+ * @param {SupportedAccessibilityLanguage} language Currenty selected language of the app
+ * @param {Object} overrides _(optional)_ Custom overrides for specific entries
+ */
+export const AccessibilityLanguageProvider: FC<PropsWithChildren<AccessibilityLanguageProviderProps>> = ({
+  language,
+  overrides,
+  children,
+}) => {
+  const translate = useMemo<AccessibilityLanguageTranslate>(() => {
+    if (typeof overrides === 'function') {
+      return overrides;
+    }
+
+    const accessibilityFile = getAccessibilityLanguageFile(language, overrides);
+    return (entryKey, params) => {
+      let translation = accessibilityFile[entryKey];
+
+      // replace params
+      if (translation && params) {
+        Object.entries(params).forEach(([key, value]) => {
+          translation = translation.replace(new RegExp(`{${key}}`, 'g'), String(value));
+        });
+      }
+
+      return translation;
+    };
+  }, [language, overrides]);
+
+  return <Provider value={translate}>{children}</Provider>;
+};
+
+/**
+ * Access accessibility language translations
+ * @note This needs to be used inside {@link AccessibilityLanguageProvider} context
+ */
+export const useAccessibilityTranslation = () => {
+  const translate = useContext(AccessibilityLanguageContext);
+
+  // check context provided
+  if (!translate) {
+    throw new Error('Accessibility Language not provided!, wrap your components in the AccessibilityLanguageProvider');
+  }
+
+  return translate;
+};

package/src/accessibility/index.ts

@@ -0,0 +1,35 @@
+import {
+  AccessibilityTextTransformer,
+  focusAccessibility,
+  setAccessibilityTextTransformer,
+  transformAccessibilityText,
+  useAccessibilityAnnouncement,
+  useAccessibilityAnnouncementCumulative,
+  useAccessibilityFocus,
+  useAccessibleAfterTransition,
+  useIsOutsideTransition,
+} from './accessibility';
+import { AccessibilityFocusHistoryProvider, useAccessibilityFocusHistory } from './accessibilityHistory';
+import { AccessibilityLanguageProvider, AccessibilityLanguageProviderProps } from './accessibilityLanguage';
+// @ts-ignore
+import { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
+
+export * from './accessibilityHistoryWrappers';
+
+export {
+  AccessibilityFocusHistoryProvider,
+  AccessibilityLanguageFile,
+  AccessibilityLanguageProvider,
+  AccessibilityLanguageProviderProps,
+  AccessibilityTextTransformer,
+  focusAccessibility,
+  setAccessibilityTextTransformer,
+  SupportedAccessibilityLanguage,
+  transformAccessibilityText,
+  useAccessibilityAnnouncement,
+  useAccessibilityAnnouncementCumulative,
+  useAccessibilityFocus,
+  useAccessibilityFocusHistory,
+  useAccessibleAfterTransition,
+  useIsOutsideTransition,
+};

package/src/accessibility/locale/de.json

@@ -0,0 +1,21 @@
+{
+  "accessibility.control.combobox.expanded": "erweitert",
+  "accessibility.control.combobox.tapToSelect": "Zum Auswählen doppeltippen",
+  "accessibility.control.order": "{current} von {length}",
+  "accessibility.control.progress": "{current} von {length}",
+  "accessibility.control.checked": "ausgewählt",
+  "accessibility.control.unchecked": "nicht ausgewählt",
+  "accessibility.control.clear": "löschen",
+  "accessibility.control.delete": "löschen",
+  "accessibility.control.list.moveDown": "Nach unten bewegen",
+  "accessibility.control.list.moveUp": "Nach oben bewegen",
+  "accessibility.nav.back": "zurück",
+  "accessibility.nav.close": "schliessen",
+  "accessibility.nav.next": "weiter",
+  "accessibility.icon.edit": "bearbeiten",
+  "accessibility.icon.add": "hinzufügen",
+  "accessibility.icon.filter": "filter",
+  "accessibility.icon.scan": "scannen",
+  "accessibility.key.faceId": "faceId",
+  "accessibility.key.fingerprint": "Fingerabdruck"
+}

package/src/accessibility/locale/en.json

@@ -0,0 +1,21 @@
+{
+  "accessibility.control.combobox.expanded": "Expanded",
+  "accessibility.control.combobox.tapToSelect": "Double-tap to select",
+  "accessibility.control.order": "{current} of {length}",
+  "accessibility.control.progress": "{current} out of {length}",
+  "accessibility.control.checked": "checked",
+  "accessibility.control.unchecked": "not checked",
+  "accessibility.control.clear": "clear",
+  "accessibility.control.delete": "delete",
+  "accessibility.control.list.moveDown": "Move down",
+  "accessibility.control.list.moveUp": "Move up",
+  "accessibility.nav.back": "back",
+  "accessibility.nav.close": "close",
+  "accessibility.nav.next": "next",
+  "accessibility.icon.edit": "edit",
+  "accessibility.icon.add": "add",
+  "accessibility.icon.filter": "filter",
+  "accessibility.icon.scan": "scan",
+  "accessibility.key.faceId": "faceId",
+  "accessibility.key.fingerprint": "fingerprint"
+}

package/src/accessibility/locale/fr.json

@@ -0,0 +1,21 @@
+{
+  "accessibility.control.combobox.expanded": "Élargi",
+  "accessibility.control.combobox.tapToSelect": "Touchez deux fois pour sélectionner",
+  "accessibility.control.order": "{current} de {length}",
+  "accessibility.control.progress": "{current} sur {length}",
+  "accessibility.control.checked": "cochée",
+  "accessibility.control.unchecked": "décochée",
+  "accessibility.control.clear": "effacer",
+  "accessibility.control.delete": "supprimer",
+  "accessibility.control.list.moveDown": "Descendre",
+  "accessibility.control.list.moveUp": "Avancez",
+  "accessibility.nav.back": "retour",
+  "accessibility.nav.close": "fermer",
+  "accessibility.nav.next": "suivant",
+  "accessibility.icon.edit": "modifier",
+  "accessibility.icon.add": "ajouter",
+  "accessibility.icon.filter": "filtre",
+  "accessibility.icon.scan": "scanner",
+  "accessibility.key.faceId": "faceId",
+  "accessibility.key.fingerprint": "Empreinte digitale"
+}

package/src/accessibility/locale/index.ts

@@ -0,0 +1,19 @@
+import de from './de.json';
+import en from './en.json';
+import fr from './fr.json';
+import it from './it.json';
+
+export const defaultLanguageFiles = { en, de, fr, it };
+
+export type SupportedAccessibilityLanguage = keyof typeof defaultLanguageFiles;
+export type AccessibilityLanguageFile = typeof en;
+
+export const getAccessibilityLanguageFile = (
+  language: SupportedAccessibilityLanguage,
+  overrides?: Partial<AccessibilityLanguageFile>,
+): AccessibilityLanguageFile =>
+  Object.assign<{}, AccessibilityLanguageFile, Partial<AccessibilityLanguageFile> | undefined>(
+    {},
+    defaultLanguageFiles[language],
+    overrides,
+  );

package/src/accessibility/locale/it.json

@@ -0,0 +1,21 @@
+{
+  "accessibility.control.combobox.expanded": "Espanso",
+  "accessibility.control.combobox.tapToSelect": "Tocca due volte per selezionare",
+  "accessibility.control.order": "{current} di {length}",
+  "accessibility.control.progress": "{current} su {length}",
+  "accessibility.control.checked": "selezionato",
+  "accessibility.control.unchecked": "deselezionato",
+  "accessibility.control.clear": "cancellare",
+  "accessibility.control.delete": "cancellare",
+  "accessibility.control.list.moveDown": "Scendere",
+  "accessibility.control.list.moveUp": "Salire",
+  "accessibility.nav.back": "indietro",
+  "accessibility.nav.close": "chiudere",
+  "accessibility.nav.next": "prossimo",
+  "accessibility.icon.edit": "modificare",
+  "accessibility.icon.add": "addizionare",
+  "accessibility.icon.scan": "scannerizzare",
+  "accessibility.icon.filter": "filtro",
+  "accessibility.key.faceId": "faceId",
+  "accessibility.key.fingerprint": "Impronta digitale"
+}

package/src/accessibility/locale.test.ts

@@ -0,0 +1,16 @@
+import { AccessibilityLanguageFile, defaultLanguageFiles, SupportedAccessibilityLanguage } from './locale';
+
+it('language files consistency', () => {
+  const mainFile: AccessibilityLanguageFile = defaultLanguageFiles.en;
+  const getNumberOfEntries = (file: AccessibilityLanguageFile) => Object.keys(file).length;
+
+  Object.keys(defaultLanguageFiles).forEach((lang) => {
+    const checkedFile: AccessibilityLanguageFile = defaultLanguageFiles[lang as SupportedAccessibilityLanguage];
+
+    expect(getNumberOfEntries(checkedFile)).toBe(getNumberOfEntries(mainFile));
+
+    Object.keys(checkedFile).forEach((entryKey) => {
+      expect(Object.keys(mainFile)).toContain(entryKey);
+    });
+  });
+});

package/src/action-modal/ActionModal.stories.tsx

@@ -0,0 +1,35 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../buttons';
+import { Typography } from '../text';
+import ActionModal from './ActionModal';
+
+const Basic: Story = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button title="Show modal" onPress={() => setVisible(true)} />
+      <ActionModal visible={visible}>
+        <View>
+          <Typography color={'white'}>Example text in modal</Typography>
+          <Button title="Hide modal" onPress={() => setVisible(false)} />
+        </View>
+      </ActionModal>
+    </>
+  );
+};
+
+export { Basic as ActionModal };
+
+export default {
+  title: 'base/Action Modal',
+  component: ActionModal,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=391-9097&t=WhKthlRU5MCuUWfw-0',
+    },
+  },
+} as ComponentMeta<typeof ActionModal>;

package/src/action-modal/ActionModal.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { Modal, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { useAppColorScheme } from '../theme';
+
+interface Props {
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  visible: boolean;
+  testID?: string;
+}
+
+const styles = StyleSheet.create({
+  background: {
+    height: '100%',
+    width: '100%',
+  },
+  contentContainer: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginTop: 'auto',
+    width: '100%',
+  },
+});
+
+const ActionModal: FunctionComponent<PropsWithChildren<Props>> = ({
+  children,
+  contentStyle,
+  style,
+  visible,
+  testID,
+}) => {
+  const colorScheme = useAppColorScheme();
+  const overlay = 'rgba(0, 0, 0, 0.5)';
+
+  return (
+    <Modal animationType="fade" statusBarTranslucent style={style} transparent visible={visible}>
+      <View testID={testID} style={[styles.background, { backgroundColor: overlay }]}>
+        <View style={[styles.contentContainer, { backgroundColor: colorScheme.white }, contentStyle]}>{children}</View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ActionModal;