chore: resolution error when trying module fallback with ts source imports

Author: bang9

packages/uikit-react-native-foundation/src/components/Image/FastImageInternal.tsx

@@ -0,0 +1,9 @@
+import type { FastImageProps } from 'react-native-fast-image';
+
+let FastImageInternal: (props: FastImageProps) => JSX.Element | null = () => null;
+
+try {
+  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
+} catch {}
+
+export default FastImageInternal;

packages/uikit-react-native-foundation/src/components/Image/Image.fastimage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { FastImageProps, ResizeMode, Source } from 'react-native-fast-image';
 
+import FastImageInternal from './FastImageInternal';
 import type { SendbirdImageComponent, SendbirdImageProps } from './index';
 
 function convertCache(
@@ -53,12 +54,6 @@ function convertResizeMode(mode?: SendbirdImageProps['resizeMode']): ResizeMode
   }
 }
 
-let FastImage: (props: FastImageProps) => JSX.Element | null = () => null;
-
-try {
-  FastImage = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
-} catch {}
-
 const Image_FastImage: SendbirdImageComponent = ({
   source,
   defaultSource,
@@ -69,7 +64,7 @@ const Image_FastImage: SendbirdImageComponent = ({
   ...props
 }) => {
   return (
-    <FastImage
+    <FastImageInternal
       {...props}
       onLoad={onLoad && ((e) => onLoad(e.nativeEvent))}
       onError={onError && (() => onError({}))}

packages/uikit-react-native/src/components/ChatFlatList/FlatListInternal.tsx

@@ -0,0 +1,40 @@
+/**
+ * */
+import type { ForwardedRef, ReactElement } from 'react';
+import type { FlatListProps, FlatList as RNFlatList, ScrollViewProps } from 'react-native';
+import { Platform } from 'react-native';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+type FlatListBidirectional<T = SendbirdMessage> = (props: FlatListProps<T> & BidirectionalProps<T>) => ReactElement;
+type BidirectionalProps<T> = {
+  onStartReached?: ((info: { distanceFromStart: number }) => void) | null | undefined;
+  onStartReachedThreshold?: number | null | undefined;
+  onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
+  onEndReachedThreshold?: number | null | undefined;
+  maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
+  ref: ForwardedRef<RNFlatList<T>>;
+};
+
+function shouldUseScrollViewEnhancer() {
+  if (Platform.constants.reactNativeVersion.major < 1) {
+    if (Platform.constants.reactNativeVersion.minor < 72) {
+      return true;
+    }
+  }
+  return false;
+}
+function getFlatList(): FlatListBidirectional {
+  if (shouldUseScrollViewEnhancer()) {
+    try {
+      return require('@sendbird/react-native-scrollview-enhancer').FlatList;
+    } catch {
+      return require('react-native').FlatList;
+    }
+  } else {
+    return require('react-native').FlatList;
+  }
+}
+
+const FlatListInternal = getFlatList();
+export default FlatListInternal;

…t-native/src/components/ChatFlatList.tsx …ve/src/components/ChatFlatList/index.tsxpackages/uikit-react-native/src/components/ChatFlatList.tsx renamed to packages/uikit-react-native/src/components/ChatFlatList/index.tsx packages/uikit-react-native/src/components/ChatFlatList.tsx renamed to packages/uikit-react-native/src/components/ChatFlatList/index.tsx

@@ -1,46 +1,15 @@
-import React, { ForwardedRef, forwardRef, useRef } from 'react';
-import { FlatListProps, Platform, FlatList as RNFlatList, ScrollViewProps, StyleSheet } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import { FlatListProps, Platform, FlatList as RNFlatList, StyleSheet } from 'react-native';
 
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
+import FlatListInternal from './FlatListInternal';
+
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
 const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
 
-type FlatListBidirectional<T = SendbirdMessage> = (
-  props: FlatListProps<T> & BidirectionalProps<T>,
-) => React.ReactElement;
-type BidirectionalProps<T> = {
-  onStartReached?: ((info: { distanceFromStart: number }) => void) | null | undefined;
-  onStartReachedThreshold?: number | null | undefined;
-  onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
-  onEndReachedThreshold?: number | null | undefined;
-  maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
-  ref: ForwardedRef<RNFlatList<T>>;
-};
-
-function shouldUseScrollViewEnhancer() {
-  if (Platform.constants.reactNativeVersion.major < 1) {
-    if (Platform.constants.reactNativeVersion.minor < 72) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function getFlatList(): FlatListBidirectional {
-  try {
-    return !shouldUseScrollViewEnhancer()
-      ? require('@sendbird/react-native-scrollview-enhancer').FlatList
-      : require('react-native').FlatList;
-  } catch {
-    return require('react-native').FlatList;
-  }
-}
-
-const FlatList = getFlatList();
-
 type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
   onBottomReached: () => void;
   onTopReached: () => void;
@@ -81,7 +50,7 @@ const ChatFlatList = forwardRef<RNFlatList, Props>(function CustomFlatList(
   }
 
   return (
-    <FlatList
+    <FlatListInternal
       bounces={false}
       removeClippedSubviews
       keyboardDismissMode={'on-drag'}