refactor: react-native-scrollview-enhancer handle as a optional

sendbird · Jun 14, 2023 · d570851 · d570851
1 parent 3f55e18
commit d570851
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/packages/uikit-react-native/README.md b/packages/uikit-react-native/README.md
@@ -46,6 +46,8 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 
 **Install dependencies**
 
+> Note: If you are using `react-native` version `0.72` or higher, you don't need to install `@sendbird/react-native-scrollview-enhancer`.
+
 ```sh
 npm install @sendbird/uikit-react-native \
             @sendbird/chat \

diff --git a/packages/uikit-react-native/package.json b/packages/uikit-react-native/package.json
@@ -138,6 +138,9 @@
     "@react-native-firebase/messaging": {
       "optional": true
     },
+    "@sendbird/react-native-scrollview-enhancer": {
+      "optional": true
+    },
     "expo-av": {
       "optional": true
     },

diff --git a/packages/uikit-react-native/src/components/ChatFlatList.tsx b/packages/uikit-react-native/src/components/ChatFlatList.tsx
@@ -1,21 +1,53 @@
-import React, { forwardRef, useRef } from 'react';
-import { FlatListProps, Platform, FlatList as RNFlatList, StyleSheet } from 'react-native';
+import React, { ForwardedRef, forwardRef, useRef } from 'react';
+import { FlatListProps, Platform, FlatList as RNFlatList, ScrollViewProps, StyleSheet } from 'react-native';
 
-import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 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;
   onScrolledAwayFromBottom: (value: boolean) => void;
 };
 // FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
-const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function CustomFlatList(
+const ChatFlatList = forwardRef<RNFlatList, Props>(function CustomFlatList(
   { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
   ref,
 ) {
@@ -43,7 +75,8 @@ const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function Cus
     ANDROID_BUG_ALERT_SHOWED = true;
     // eslint-disable-next-line no-console
     console.warn(
-      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\nhttps://github.com/facebook/react-native/issues/30034',
+      'UIKit Warning: The inverted FlatList has a performance issue on Android. Maybe this is a bug.\n' +
+        'Please refer to the link: https://github.com/facebook/react-native/issues/30034',
     );
   }