feat: implement type inferences

Author: bang9

example/src/App.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
+import {
+  FlatList,
+  ScrollView,
+} from '@sendbird/react-native-scrollview-enhancer';
 
 let lastIdx = 0;
 function messageFetcher(count: number) {
@@ -25,12 +28,22 @@ export default function App() {
 
   return (
     <View style={styles.container}>
+      <ScrollView>
+        <Text>{'123'}</Text>
+      </ScrollView>
       <FlatList
         inverted
         style={styles.box}
+        onStartReachedThreshold={2}
         maintainVisibleContentPosition={{
-          autoscrollToTopThreshold: 10,
-          minIndexForVisible: 0,
+          autoscrollToTopThreshold: 0,
+          minIndexForVisible: 1,
+        }}
+        onStartReached={() => {
+          setMessages((prev) => [...prev, ...messageFetcher(20)]);
+        }}
+        onEndReached={() => {
+          setMessages((prev) => [...messageFetcher(20), ...prev]);
         }}
         onLayout={(e) => console.log('flatlist', e.nativeEvent)}
         data={messages}
@@ -53,7 +66,7 @@ export default function App() {
       <Pressable
         style={{ width: 100, height: 100 }}
         onPress={() => {
-          setMessages((prev) => [...messageFetcher(5), ...prev]);
+          setMessages((prev) => [...messageFetcher(20), ...prev]);
         }}
       >
         <Text>{'Load more'}</Text>
@@ -74,6 +87,5 @@ const styles = StyleSheet.create({
   },
   box: {
     flex: 1,
-    backgroundColor: 'blue',
   },
 });

src/enhanceScrollView.tsx

@@ -0,0 +1,68 @@
+import React, { ComponentType, useRef } from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  ScrollViewProps,
+} from 'react-native';
+import { ScrollViewEnhancerView } from './native';
+import type {
+  EnhancedScrollViewProps,
+  GetProps,
+  ScrollViewEnhancerProps,
+} from './types';
+import { getRNVersion } from './utils';
+
+export const enhanceScrollView = <
+  T extends ComponentType<P>,
+  P extends ScrollViewEnhancerProps = GetProps<T>
+>(
+  ScrollViewComponent: T
+) => {
+  const { minor } = getRNVersion();
+  return React.forwardRef<T, P & EnhancedScrollViewProps>(
+    (props: P, ref?: any): React.ReactElement | null => {
+      const { renderScrollView } = useBiDirection(
+        ScrollViewComponent,
+        props,
+        ref
+      );
+
+      if (Platform.OS === 'android' && minor < 72) {
+        return (
+          <ScrollViewEnhancerView
+            style={props.style}
+            horizontal={props.horizontal}
+            maintainVisibleContentPosition={
+              props.maintainVisibleContentPosition
+            }
+          >
+            {renderScrollView()}
+          </ScrollViewEnhancerView>
+        );
+      } else {
+        return renderScrollView();
+      }
+    }
+  );
+};
+
+export function useBiDirection<
+  P extends ScrollViewProps & EnhancedScrollViewProps = {}
+>(Component: ComponentType<P>, props: P, ref?: any) {
+  const innerRef = useRef<any>();
+  const getRef = () => ref || innerRef;
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    props.onScroll?.(e);
+
+    console.log(getRef());
+  };
+
+  const renderScrollView = () => {
+    return <Component {...props} onScroll={onScroll} />;
+  };
+
+  return {
+    renderScrollView,
+  };
+}

src/index.ts

@@ -0,0 +1,19 @@
+import {
+  FlatList as RNFlatList,
+  ScrollView as RNScrollView,
+  SectionList as RNSectionList,
+} from 'react-native';
+import type { EnhancedScrollViewAbstraction } from './types';
+import { enhanceScrollView } from './enhanceScrollView';
+
+const ScrollView = enhanceScrollView(RNScrollView);
+const FlatList = enhanceScrollView(RNFlatList) as unknown as
+  | typeof RNFlatList
+  | EnhancedScrollViewAbstraction<RNFlatList>;
+const SectionList = enhanceScrollView(RNSectionList) as unknown as
+  | typeof RNSectionList
+  | EnhancedScrollViewAbstraction<RNSectionList>;
+
+export { enhanceScrollView, useBiDirection } from './enhanceScrollView';
+export { ScrollViewEnhancerView } from './native';
+export { ScrollView, FlatList, SectionList };

src/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Platform, requireNativeComponent, UIManager } from 'react-native';
+
+import type { ScrollViewEnhancerProps } from './types';
+import { warningOnHorizontalScroll } from './utils';
+
+const LINKING_ERROR =
+  `The package 'react-native-scrollview-enhancer' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+const ComponentName = 'ScrollViewEnhancerView';
+export const NativeView =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<ScrollViewEnhancerProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export const ScrollViewEnhancerView = (props: ScrollViewEnhancerProps) => {
+  if (__DEV__) warningOnHorizontalScroll(props);
+  return <NativeView {...props} />;
+};

src/native.tsx

@@ -0,0 +1,59 @@
+import type {
+  ComponentType,
+  ForwardRefExoticComponent,
+  PropsWithChildren,
+  PropsWithoutRef,
+  RefAttributes,
+} from 'react';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+
+export type ScrollViewEnhancerProps = PropsWithChildren<{
+  style?: StyleProp<ViewStyle>;
+  horizontal?: boolean | null;
+  maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
+}>;
+
+export type EnhancedScrollViewProps = {
+  /**
+   * Called once when the scroll position gets within `onStartReachedThreshold`
+   * from the logical start of the list.
+   */
+  onStartReached?:
+    | ((info: { distanceFromStart: number }) => void)
+    | null
+    | undefined;
+
+  /**
+   * How far from the start (in units of visible length of the list) the leading edge of the
+   * list must be from the start of the content to trigger the `onStartReached` callback.
+   * Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
+   * within half the visible length of the list.
+   */
+  onStartReachedThreshold?: number | null | undefined;
+
+  /**
+   * Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
+   */
+  onEndReached?:
+    | ((info: { distanceFromEnd: number }) => void)
+    | null
+    | undefined;
+
+  /**
+   * How far from the end (in units of visible length of the list) the bottom edge of the
+   * list must be from the end of the content to trigger the `onEndReached` callback.
+   * Thus, a value of 0.5 will trigger `onEndReached` when the end of the content is
+   * within half the visible length of the list.
+   */
+  onEndReachedThreshold?: number | null | undefined;
+
+  maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
+};
+
+export type GetProps<T> = T extends ComponentType<infer P> ? P : never;
+export type InjectProps<C, P> = C extends ComponentType<infer T>
+  ? ComponentType<T & P>
+  : never;
+export type EnhancedScrollViewAbstraction<T> = ForwardRefExoticComponent<
+  PropsWithoutRef<EnhancedScrollViewProps> & RefAttributes<T>
+>;

src/types.ts

@@ -0,0 +1,24 @@
+import { Platform } from 'react-native';
+import type { ScrollViewEnhancerProps } from './types';
+
+const pkgVersion = require('react-native/package.json').version as string;
+const [major, minor, patch] = pkgVersion.split('.').map((it) => Number(it)) as [
+  number,
+  number,
+  number
+];
+const parsedVersion = { major, minor, patch };
+
+let _warningCalled = false;
+export function warningOnHorizontalScroll(props: ScrollViewEnhancerProps) {
+  if (props.horizontal && Platform.OS === 'android' && !_warningCalled) {
+    _warningCalled = true;
+    console.warn(
+      'ScrollViewEnhancerView does not support horizontal direction'
+    );
+  }
+}
+
+export function getRNVersion() {
+  return parsedVersion;
+}