@procivis/one-react-native-components 0.2.54 → 0.3.22

package/src/components/history/history-details-screen.tsx

@@ -0,0 +1,89 @@
+import {
+  HistoryActionEnum,
+  HistoryListItem,
+} from '@procivis/react-native-one-core';
+import React, { FC, ReactElement } from 'react';
+import { ImageSourcePropType } from 'react-native';
+
+import { ColorScheme, useAppColorScheme } from '../../ui-components';
+import {
+  HistoryDetailsLabels,
+  HistoryDetailsView,
+  HistoryDetailsViewProps,
+} from '../../ui-components/history/history-details';
+import { capitalizeFirstLetter, concatTestID, formatDateTimeLocalized } from '../../utils';
+import { HistoryListItemLabels } from './history-list-item';
+import { getHistoryItemActionIcon } from './history-list-item-icon';
+
+const getStatusTextColor = (action: HistoryActionEnum, colorScheme: Readonly<ColorScheme>) => {
+  switch (action) {
+    case HistoryActionEnum.CLAIMS_REMOVED:
+    case HistoryActionEnum.DEACTIVATED:
+    case HistoryActionEnum.DELETED:
+    case HistoryActionEnum.REJECTED:
+    case HistoryActionEnum.REVOKED:
+    case HistoryActionEnum.ERRORED:
+      return colorScheme.errorText;
+    case HistoryActionEnum.SUSPENDED:
+    case HistoryActionEnum.OFFERED:
+    case HistoryActionEnum.PENDING:
+    case HistoryActionEnum.REQUESTED:
+      return colorScheme.text;
+    default:
+      return colorScheme.successText;
+  }
+};
+
+export type HistoryDetailsScreenLabels = HistoryDetailsLabels & {
+  item: HistoryListItemLabels;
+};
+
+export type HistoryDetailsScreenProps = {
+  assets: HistoryDetailsViewProps['assets'];
+  dataHeader: HistoryDetailsViewProps['data']['header'];
+  headerButton?: ReactElement;
+  item: HistoryListItem;
+  labels: HistoryDetailsScreenLabels;
+  onBackPressed: () => void;
+  onInfoPressed?: () => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+  testID?: string;
+};
+
+export const HistoryDetailsScreen: FC<HistoryDetailsScreenProps> = ({
+  assets,
+  dataHeader,
+  headerButton,
+  item,
+  labels,
+  onBackPressed,
+  onInfoPressed,
+  onImagePreview,
+  testID = 'HistoryDetailScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+
+  const actionValueColor = getStatusTextColor(item.action, colorScheme);
+
+  return (
+    <HistoryDetailsView
+      assets={assets}
+      data={{
+        header: dataHeader,
+        date: formatDateTimeLocalized(new Date(item.createdDate)) ?? '',
+        action: {
+          icon: getHistoryItemActionIcon(item.action),
+          label: capitalizeFirstLetter(labels.item.actions[item.action]),
+          color: actionValueColor,
+          testID: concatTestID(testID, 'action', item.action),
+        },
+      }}
+      headerButton={headerButton}
+      labels={labels}
+      onBackPressed={onBackPressed}
+      onInfoPressed={onInfoPressed}
+      onImagePreview={onImagePreview}
+      testID={testID}
+    />
+  );
+};

package/src/components/history/history-list-item-icon.tsx

@@ -0,0 +1,108 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useMemo } from 'react';
+import { SvgProps } from 'react-native-svg';
+
+import {
+  HistoryBackupCreatedIcon,
+  HistoryBackupRestoredIcon,
+  HistoryCredentialIcon,
+  HistoryDidIcon,
+  HistoryIssueIcon,
+  HistoryItemIcon,
+  HistoryKeyIcon,
+  HistoryOrganisationIcon,
+  HistoryProofRequestIcon,
+  HistoryRevokeIcon,
+  HistorySchemaIcon,
+  HistoryStatusAcceptedIcon,
+  HistoryStatusDeleteIcon,
+  HistoryStatusErrorIcon,
+  HistoryStatusSuspendIcon,
+  HistorySuspendIcon,
+  HistoryTrustAnchorIcon,
+  HistoryTrustedEntityIcon,
+} from '../../ui-components';
+
+const defaultIcons: {
+  actions: { [key in keyof typeof HistoryActionEnum]: FC<SvgProps> };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: FC<SvgProps> };
+} = {
+  actions: {
+    ACCEPTED: HistoryStatusAcceptedIcon,
+    ACTIVATED: HistoryStatusAcceptedIcon,
+    CLAIMS_REMOVED: HistoryStatusDeleteIcon,
+    CREATED: HistoryStatusAcceptedIcon,
+    DEACTIVATED: HistoryStatusErrorIcon,
+    DELETED: HistoryStatusDeleteIcon,
+    ERRORED: HistoryStatusErrorIcon,
+    IMPORTED: HistoryStatusAcceptedIcon,
+    ISSUED: HistoryStatusAcceptedIcon,
+    OFFERED: HistoryStatusAcceptedIcon,
+    PENDING: HistoryStatusAcceptedIcon,
+    REJECTED: HistoryStatusErrorIcon,
+    REMOVED: HistoryStatusDeleteIcon,
+    REQUESTED: HistoryStatusAcceptedIcon,
+    RESTORED: HistoryStatusAcceptedIcon,
+    RETRACTED: HistoryStatusErrorIcon,
+    REVOKED: HistoryStatusErrorIcon,
+    SHARED: HistoryStatusAcceptedIcon,
+    SUSPENDED: HistoryStatusSuspendIcon,
+    UPDATED: HistoryStatusAcceptedIcon,
+    WITHDRAWN: HistoryStatusErrorIcon,
+    REACTIVATED: HistoryStatusAcceptedIcon,
+    CSR_GENERATED: HistoryStatusAcceptedIcon,
+  },
+  entityTypes: {
+    BACKUP: HistoryRevokeIcon,
+    CREDENTIAL: HistoryCredentialIcon,
+    CREDENTIAL_SCHEMA: HistorySchemaIcon,
+    DID: HistoryDidIcon,
+    KEY: HistoryKeyIcon,
+    ORGANISATION: HistoryOrganisationIcon,
+    PROOF: HistoryProofRequestIcon,
+    PROOF_SCHEMA: HistorySchemaIcon,
+    TRUST_ANCHOR: HistoryTrustAnchorIcon,
+    TRUST_ENTITY: HistoryTrustedEntityIcon,
+  },
+};
+
+export const getHistoryItemActionIcon = (action: HistoryActionEnum) => {
+  return defaultIcons.actions[action] ?? HistoryStatusAcceptedIcon;
+};
+
+export type HistoryListItemIconProps = {
+  item: HistoryListItem;
+};
+
+export const HistoryListItemIcon: FC<HistoryListItemIconProps> = ({ item }) => {
+  const statusIcon = getHistoryItemActionIcon(item.action);
+  const typeIcon = useMemo(() => {
+    switch (item.entityType) {
+      case HistoryEntityTypeEnum.BACKUP:
+        switch (item.action) {
+          case HistoryActionEnum.CREATED:
+            return HistoryBackupCreatedIcon;
+          case HistoryActionEnum.RESTORED:
+            return HistoryBackupRestoredIcon;
+          default:
+            break;
+        }
+        break;
+      case HistoryEntityTypeEnum.CREDENTIAL:
+        switch (item.action) {
+          case HistoryActionEnum.REVOKED:
+            return HistoryRevokeIcon;
+          case HistoryActionEnum.SUSPENDED:
+            return HistorySuspendIcon;
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return defaultIcons.entityTypes[item.entityType] ?? HistoryIssueIcon;
+  }, [item.action, item.entityType]);
+  return <HistoryItemIcon StatusIcon={statusIcon} TypeIcon={typeIcon} />;
+};

package/src/components/history/history-list-item.tsx

@@ -0,0 +1,53 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useCallback } from 'react';
+
+import { HistoryItemView } from '../../ui-components';
+import { formatTime, useTrustEntity } from '../../utils';
+import { HistoryListItemIcon } from './history-list-item-icon';
+
+export type HistoryListItemLabels = {
+  actions: { [key in keyof typeof HistoryActionEnum]: string };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: string };
+};
+
+export interface HistoryListItemViewProps {
+  dateFormatter?: (date: Date) => string;
+  first?: boolean;
+  item: HistoryListItem;
+  labels: HistoryListItemLabels;
+  last?: boolean;
+  onPress?: (item: HistoryListItem) => void;
+  testID?: string;
+}
+
+export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
+  dateFormatter = formatTime,
+  first,
+  item,
+  labels,
+  last,
+  onPress,
+  testID
+}) => {
+  const { data: entity } = useTrustEntity(item.target);
+
+  const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
+  const icon = <HistoryListItemIcon item={item} />;
+
+  const pressHandler = useCallback(() => {
+    onPress?.(item);
+  }, [onPress, item]);
+
+  return (
+    <HistoryItemView
+      first={first}
+      icon={icon}
+      info={entity?.name}
+      label={label}
+      last={last}
+      onPress={pressHandler}
+      testID={testID}
+      time={dateFormatter(new Date(item.createdDate)) ?? ''}
+    />
+  );
+};

package/src/components/history/history-list-screen.tsx

@@ -0,0 +1,154 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { debounce } from 'lodash';
+import React, { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import {
+  BackButton,
+  FilterButton,
+  FoldableHeader,
+  NavigationHeader,
+  Typography,
+  useAppColorScheme,
+} from '../../ui-components';
+import { concatTestID, groupEntriesByDay, HistoryGroupByDaySection, useListContentInset } from '../../utils';
+import { HistoryListLabels, HistoryListView } from './history-list';
+
+export type HistoryListScreenLabels = {
+  emptyTitle: string;
+  emptySubtitle: string;
+  list: HistoryListLabels;
+  title: string;
+  search: string;
+};
+
+export type HistoryListScreenProps = {
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  labels: HistoryListScreenLabels;
+  onBackPressed: () => void;
+  onHistoryItemPressed: (historyItem: HistoryListItem) => void;
+  onOpenFilter?: () => void;
+  onSearchPhraseChange: (searchPhrase: string | undefined) => void;
+  queryParams: Partial<HistoryListQuery>;
+  testID?: string;
+};
+
+export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> = ({
+  children,
+  groupItems = groupEntriesByDay,
+  labels,
+  onBackPressed,
+  onHistoryItemPressed,
+  onOpenFilter,
+  onSearchPhraseChange,
+  queryParams,
+  testID = 'HistoryScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [empty, setEmpty] = useState<boolean>(false);
+  const [scrollOffset] = useState(() => new Animated.Value(0));
+
+  const [searchPhrase, setSearchPhrase] = useState<string>('');
+  const searchBarVisible = !empty || Boolean(queryParams.searchText);
+
+  const handleSearchPhraseChange = useMemo(() => debounce(onSearchPhraseChange, 500), [onSearchPhraseChange]);
+  useEffect(() => {
+    handleSearchPhraseChange(searchPhrase || undefined);
+  }, [searchPhrase, handleSearchPhraseChange]);
+
+  const headerHeight = searchBarVisible ? 112 : 70;
+
+  const insets = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight,
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colorScheme.background,
+        },
+      ]}
+      testID={testID}>
+      {empty && (
+        <View
+          style={[
+            styles.emptyNotice,
+            {
+              backgroundColor: colorScheme.white,
+              marginTop: insets.paddingTop,
+            },
+          ]}>
+          <Typography align="center" color={colorScheme.text} preset="s">
+            {labels.emptyTitle}
+          </Typography>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-small" style={styles.shaded}>
+            {labels.emptySubtitle}
+          </Typography>
+        </View>
+      )}
+      <HistoryListView
+        contentContainerStyle={insets}
+        groupItems={groupItems}
+        itemProps={{ onPress: onHistoryItemPressed }}
+        onEmpty={setEmpty}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+          useNativeDriver: true,
+        })}
+        query={queryParams}
+        testID={concatTestID(testID, 'list')}
+        labels={labels.list}
+      />
+      {children}
+      <FoldableHeader
+        header={
+          <NavigationHeader
+            backgroundColor={'transparent'}
+            leftItem={<BackButton onPress={onBackPressed} testID={concatTestID(testID, 'back')} />}
+            title={labels.title}
+          />
+        }
+        scrollOffset={scrollOffset}
+        searchBar={
+          !searchBarVisible
+            ? undefined
+            : {
+                rightButton: onOpenFilter ? (
+                  <FilterButton
+                    active={Boolean(queryParams.credentialSchemaId)}
+                    onPress={onOpenFilter}
+                    testID={concatTestID(testID, 'filter')}
+                  />
+                ) : undefined,
+                rightButtonAlwaysVisible: true,
+                searchBarProps: {
+                  onSearchPhraseChange: setSearchPhrase,
+                  placeholder: labels.search,
+                  searchPhrase,
+                  testID: concatTestID(testID, 'search'),
+                },
+              }
+        }
+        staticHeader={!searchBarVisible}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  emptyNotice: {
+    borderRadius: 12,
+    marginHorizontal: 16,
+    paddingBottom: 20,
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  shaded: {
+    opacity: 0.7,
+  },
+});

package/src/components/history/history-list-section-header.tsx

@@ -0,0 +1,42 @@
+import moment, { Moment } from 'moment';
+import React, { FC, useMemo } from 'react';
+
+import { HistorySectionHeaderView } from '../../ui-components';
+
+export type HistoryListSectionHeaderLabels = {
+  today: string;
+  yesterday: string;
+};
+
+export type HistoryListSectionHeaderViewProps = {
+  date: Moment;
+  firstYearEntry: boolean;
+  labels: HistoryListSectionHeaderLabels;
+  testID?: string;
+};
+
+// components used on the history section lists (Settings->History, CredentialDetail->History)
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
+
+export const HistoryListSectionHeaderView: FC<HistoryListSectionHeaderViewProps> = ({
+  date,
+  firstYearEntry,
+  labels,
+  testID,
+}) => {
+  const day = useMemo(() => {
+    const now = moment();
+    const dateString = moment(date);
+
+    if (dateString.isSame(now, 'day')) {
+      return labels.today;
+    } else if (dateString.isSame(now.subtract(1, 'day'), 'day')) {
+      return labels.yesterday;
+    }
+    return dateString.format('Do MMMM');
+  }, [date, labels]);
+
+  return (
+    <HistorySectionHeaderView day={day} testID={testID} year={firstYearEntry ? date.year().toString() : undefined} />
+  );
+};

package/src/components/history/history-list.tsx

@@ -0,0 +1,116 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { useIsFocused } from '@react-navigation/native';
+import React, { FC, useCallback, useMemo } from 'react';
+import { Animated, SectionListProps, StyleSheet } from 'react-native';
+
+import { ActivityIndicator, useAppColorScheme } from '../../ui-components';
+import ListPageLoadingIndicator from '../../ui-components/list/list-page-loading-indicator';
+import { concatTestID, useHistory } from '../../utils';
+import { groupEntriesByDay, HistoryGroupByDaySection } from '../../utils/history';
+import { HistoryListItemLabels, HistoryListItemView, HistoryListItemViewProps } from './history-list-item';
+import { HistoryListSectionHeaderLabels, HistoryListSectionHeaderView } from './history-list-section-header';
+
+export type HistoryListLabels = {
+  sectionHeader: HistoryListSectionHeaderLabels;
+  item: HistoryListItemLabels;
+};
+
+export interface HistoryListViewProps
+  extends Omit<SectionListProps<HistoryListItem, HistoryGroupByDaySection>, 'sections'> {
+  // optional customization of item props
+  getItemProps?: (item: HistoryListItem) => Partial<HistoryListItemViewProps> | undefined;
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  itemProps?: Partial<HistoryListItemViewProps>;
+  labels: HistoryListLabels;
+  // callback when empty list displayed
+  onEmpty?: (empty: boolean) => void;
+  query: Partial<HistoryListQuery>;
+}
+
+export const HistoryListView: FC<HistoryListViewProps> = ({
+  query,
+  contentContainerStyle,
+  getItemProps,
+  groupItems = groupEntriesByDay,
+  itemProps,
+  labels,
+  onEmpty,
+  onScroll,
+  ...props
+}) => {
+  const isFocused = useIsFocused();
+  const colorScheme = useAppColorScheme();
+  const {
+    data: historyData,
+    fetchNextPage: fetchNextHistoryPage,
+    hasNextPage: hasNextHistoryPage,
+    isLoading,
+  } = useHistory(query);
+
+  const history = useMemo(() => {
+    const items = historyData?.pages
+      .flat()
+      .map((page) => page.values)
+      .flat();
+    if (!items) {
+      return undefined;
+    }
+    if (historyData) {
+      setImmediate(() => onEmpty?.(!items.length));
+    }
+    return groupItems(items);
+  }, [historyData, onEmpty, groupItems]);
+
+  const onEndReached = useCallback(() => {
+    if (hasNextHistoryPage) {
+      fetchNextHistoryPage().catch(() => {});
+    }
+  }, [fetchNextHistoryPage, hasNextHistoryPage]);
+
+  if (!history) {
+    return <ActivityIndicator animate={isFocused} />;
+  }
+
+  return (
+    <Animated.SectionList<HistoryListItem, HistoryGroupByDaySection>
+      ListFooterComponent={
+        isLoading ? <ListPageLoadingIndicator color={colorScheme.accent} style={styles.footer} /> : undefined
+      }
+      contentContainerStyle={[styles.listContent, contentContainerStyle]}
+      keyExtractor={(item) => item.id}
+      onEndReached={onEndReached}
+      onScroll={onScroll}
+      renderItem={({ item, index, section }) => (
+        <HistoryListItemView
+          first={!index}
+          item={item}
+          labels={labels.item}
+          last={index === section.data.length - 1}
+          testID={concatTestID(props.testID, 'item', index.toString())}
+          {...itemProps}
+          {...getItemProps?.(item)}
+        />
+      )}
+      renderSectionHeader={({ section }) => (
+        <HistoryListSectionHeaderView
+          date={section.date}
+          firstYearEntry={section.firstYearEntry}
+          labels={labels.sectionHeader}
+          testID={concatTestID(props.testID, 'section')}
+        />
+      )}
+      sections={history}
+      stickySectionHeadersEnabled={false}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    marginVertical: 16,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+  },
+});

package/src/components/history/index.tsx

@@ -0,0 +1,6 @@
+export * from './history-details-screen';
+export * from './history-list';
+export * from './history-list-item';
+export * from './history-list-item-icon';
+export * from './history-list-screen';
+export * from './history-list-section-header';

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './backup';
 export * from './credential';
 export * from './entity';
+export * from './history';
 export * from './navigation';
 export * from './proof-request';

package/src/ui-components/accessibility/accessibility.ts

@@ -104,7 +104,7 @@ export function useIsOutsideTransition<
  * @param component component ref
  * @note Disabled on android as it is not reliable
  */
-export const focusAccessibility = (component?: React.Component | React.ComponentClass | null) => {
+export const focusAccessibility = (component?: React.ElementType<any, any> | null) => {
   if (Platform.OS === 'ios' && component) {
     const nodeHandle = findNodeHandle(component);
     if (nodeHandle) {
@@ -118,7 +118,7 @@ export const focusAccessibility = (component?: React.Component | React.Component
  * @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) => {
+export const useAccessibilityFocus = <T extends React.ElementType<any, any>>(focused: boolean = true) => {
   const ref = useRef<T>(null);
 
   useEffect(() => {

package/src/ui-components/accessibility/accessibilityHistory.tsx

@@ -4,7 +4,7 @@ import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMe
 import { useForwardedRef } from '../../utils/ref';
 import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
 
-type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
+type AccessibilityRefComponent = React.ElementType<any, any> | null;
 interface AccessibilityRefContextValue {
   setRef: (route: string, ref: AccessibilityRefComponent) => void;
   getRef: (route: string) => AccessibilityRefComponent;
@@ -36,7 +36,7 @@ export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ c
  * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
  */
 export const useAccessibilityFocusHistory = <
-  Component extends React.Component<any> | React.ComponentClass<any>,
+  Component extends React.ElementType<any, any>,
   OnPress extends (...args: never[]) => void = () => void,
 >(
   pressHandler: OnPress | undefined,

package/src/ui-components/accessibility/accessibilityHistoryWrappers.tsx

@@ -20,7 +20,7 @@ interface OnPressProps {
   onPress?: RNOnPress | null;
 }
 
-const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.Component>(
+const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.ElementType<any, any>>(
   C: React.ComponentType<ComponentProps>,
   displayName: string,
 ) => {
@@ -52,8 +52,7 @@ const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefT
 /**
  * Wrappers of RN touchable components with accessibilty focus history support
  */
-
-export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, RNTouchableOpacity>(
+export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, typeof RNTouchableOpacity>(
   RNTouchableOpacity,
   'TouchableOpacity',
 );
@@ -61,7 +60,7 @@ export const TouchableWithoutFeedback = WithAccessibilityFocusHistory<
   TouchableWithoutFeedbackProps,
   RNTouchableWithoutFeedback
 >(RNTouchableWithoutFeedback, 'TouchableWithoutFeedback');
-export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, RNTouchableHighlight>(
+export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, typeof RNTouchableHighlight>(
   RNTouchableHighlight,
   'TouchableHighlight',
 );
@@ -73,7 +72,6 @@ type WrapperRefType<C extends React.ForwardRefExoticComponent<React.RefAttribute
 /**
  * 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>;

package/src/ui-components/accessibility/index.ts

@@ -1,5 +1,5 @@
+import type { AccessibilityTextTransformer } from './accessibility';
 import {
-  AccessibilityTextTransformer,
   focusAccessibility,
   setAccessibilityTextTransformer,
   transformAccessibilityText,
@@ -10,9 +10,10 @@ import {
   useIsOutsideTransition,
 } from './accessibility';
 import { AccessibilityFocusHistoryProvider, useAccessibilityFocusHistory } from './accessibilityHistory';
-import { AccessibilityLanguageProvider, AccessibilityLanguageProviderProps } from './accessibilityLanguage';
+import type { AccessibilityLanguageProviderProps } from './accessibilityLanguage';
+import { AccessibilityLanguageProvider } from './accessibilityLanguage';
 // @ts-ignore
-import { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
+import type { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
 
 export * from './accessibilityHistoryWrappers';