feat: exports list components

Author: bang9

example/src/App.tsx

@@ -1,22 +1,19 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
-import { ScrollViewEnhancerView } from '@sendbird/react-native-scrollview-enhancer';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 
 let lastIdx = 0;
 function messageFetcher(count: number) {
   const response = new Array(count)
     .fill(0)
-    .map((_, index) => {
-      return {
-        id: `${index}+${Date.now()}`,
-        message: `Message ${lastIdx + index}`,
-      };
-    })
+    .map((_, index) => ({
+      id: `${index}+${Date.now()}`,
+      message: `Message ${lastIdx + index}`,
+    }))
     .reverse();
   lastIdx += count;
-  console.log(lastIdx);
   return response;
 }
 
@@ -28,39 +25,34 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <ScrollViewEnhancerView
+      <FlatList
+        inverted
         style={styles.box}
         maintainVisibleContentPosition={{
           autoscrollToTopThreshold: 10,
           minIndexForVisible: 0,
         }}
-      >
-        <FlatList
-          inverted
-          style={styles.box}
-          onLayout={(e) => console.log('flatlist', e.nativeEvent)}
-          data={messages}
-          keyExtractor={(item) => item.id}
-          renderItem={({ item }) => {
-            return (
-              <View
-                style={{
-                  width: '100%',
-                  backgroundColor: 'gray',
-                  marginBottom: 4,
-                  padding: 24,
-                }}
-              >
-                <Text style={{ color: 'white' }}>{item.message}</Text>
-              </View>
-            );
-          }}
-        />
-      </ScrollViewEnhancerView>
+        onLayout={(e) => console.log('flatlist', e.nativeEvent)}
+        data={messages}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View
+              style={{
+                width: '100%',
+                backgroundColor: 'gray',
+                marginBottom: 4,
+                padding: 24,
+              }}
+            >
+              <Text style={{ color: 'white' }}>{item.message}</Text>
+            </View>
+          );
+        }}
+      />
       <Pressable
         style={{ width: 100, height: 100 }}
         onPress={() => {
-          console.log('trigger');
           setMessages((prev) => [...messageFetcher(5), ...prev]);
         }}
       >

src/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import {
+  FlatList as RNFlatList,
   Platform,
   requireNativeComponent,
+  ScrollView as RNScrollView,
   ScrollViewProps,
+  SectionList as RNSectionList,
+  StyleProp,
   UIManager,
   ViewStyle,
 } from 'react-native';
@@ -14,7 +18,8 @@ const LINKING_ERROR =
   '- You are not using Expo Go\n';
 
 type ScrollViewEnhancerProps = React.PropsWithChildren<{
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
+  horizontal?: boolean | null;
   maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
 }>;
 
@@ -27,6 +32,41 @@ const NativeView =
         throw new Error(LINKING_ERROR);
       };
 
+let _warningCalled = false;
+function warningOnHorizontalScroll(props: ScrollViewEnhancerProps) {
+  if (props.horizontal && Platform.OS === 'android' && !_warningCalled) {
+    _warningCalled = true;
+    console.warn(
+      'ScrollViewEnhancerView does not support horizontal direction'
+    );
+  }
+}
+
 export const ScrollViewEnhancerView = (props: ScrollViewEnhancerProps) => {
+  if (__DEV__) warningOnHorizontalScroll(props);
   return <NativeView {...props} />;
 };
+
+export const enhanceScrollView = <T extends React.ComponentType<any>>(
+  Component: T
+): T => {
+  return ((props: any) => {
+    if (Platform.OS === 'android') {
+      return (
+        <ScrollViewEnhancerView
+          style={props.style}
+          horizontal={props.horizontal}
+          maintainVisibleContentPosition={props.maintainVisibleContentPosition}
+        >
+          <Component {...props} />
+        </ScrollViewEnhancerView>
+      );
+    } else {
+      return <Component {...props} />;
+    }
+  }) as T;
+};
+
+export const ScrollView = enhanceScrollView(RNScrollView);
+export const FlatList = enhanceScrollView(RNFlatList);
+export const SectionList = enhanceScrollView(RNSectionList);