feat: implemented onStartReached (#1)

* chore: remove link

* chore: add base helpers

* chore: implement basic query

* chore: added basic implementation

* feat: implement bi-direction

* chore: renaming more clearly

* skip

* test: added deferred test

* chore: remove unused useCallback

Author: bang9

example/ios/Podfile.lock

@@ -329,8 +329,6 @@ PODS:
   - React-jsinspector (0.71.5)
   - React-logger (0.71.5):
     - glog
-  - react-native-scrollview-enhancer (0.1.0):
-    - React-Core
   - React-perflogger (0.71.5)
   - React-RCTActionSheet (0.71.5):
     - React-Core/RCTActionSheetHeaders (= 0.71.5)
@@ -466,7 +464,6 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
-  - react-native-scrollview-enhancer (from `../..`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -541,8 +538,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
-  react-native-scrollview-enhancer:
-    :path: "../.."
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -606,7 +601,6 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 1579bf3207afadc72ac3638a66a102d1bf5263e3
   React-jsinspector: 14a342151ab810862998dfc99e2720746734e9b3
   React-logger: 94ec392ae471683635e4bf874d4e82f675399d2d
-  react-native-scrollview-enhancer: 5139533f7c2f5772cc91aa2da940d5cc01b32175
   React-perflogger: 883a55a9a899535eaf06d0029108ef9ef22cce92
   React-RCTActionSheet: 1a3b8416688a3d291367be645022886f71d6842a
   React-RCTAnimation: e5560cb72d91ba35151d51e2eb0d467b42763f43

example/metro.config.js

@@ -16,12 +16,7 @@ module.exports = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we block them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
+    blacklistRE: exclusionList(modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

example/src/App.tsx

@@ -1,81 +1,85 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import {
-  FlatList,
-  ScrollView,
-} from '@sendbird/react-native-scrollview-enhancer';
+import { FlatList as RNFlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 
-let lastIdx = 0;
 function messageFetcher(count: number) {
-  const response = new Array(count)
+  return new Array(count)
     .fill(0)
     .map((_, index) => ({
       id: `${index}+${Date.now()}`,
-      message: `Message ${lastIdx + index}`,
+      message: `Message ${index}`,
     }))
     .reverse();
-  lastIdx += count;
-  return response;
+}
+
+class BasicQuery {
+  private _messages = messageFetcher(500).reverse();
+  private _cursor = {
+    prev: this._messages.length / 2,
+    next: this._messages.length / 2 - 1,
+  };
+
+  loadPrev(count: number) {
+    const sliceRange = [this._cursor.prev, this._cursor.prev + count];
+    this._cursor.prev += count;
+    return this._messages.slice(...sliceRange);
+  }
+  loadNext(count: number) {
+    const sliceRange = [this._cursor.next - count, this._cursor.next];
+    this._cursor.next -= count;
+    return this._messages.slice(...sliceRange);
+  }
+  get hasNext() {
+    return this._cursor.next > 0;
+  }
+  get hasPrev() {
+    return this._cursor.prev < this._messages.length;
+  }
 }
 
 export default function App() {
-  const [layout, setLayout] = useState(50);
-  const [messages, setMessages] = useState<{ id: string; message: string }[]>(
-    () => messageFetcher(5)
-  );
+  const query = useRef(new BasicQuery());
+  const [messages, setMessages] = useState<{ id: string; message: string }[]>(() => query.current.loadPrev(10));
+
+  const viewRef = useRef<RNFlatList>(null);
+
+  const onEndReached = () => {
+    console.log('onEndReached');
+    setMessages((prev) => [...prev, ...query.current.loadPrev(5)]);
+  };
+
+  const onStartReached = () => {
+    console.log('onStartReached');
+    setMessages((prev) => [...query.current.loadNext(5), ...prev]);
+  };
 
   return (
     <View style={styles.container}>
-      <ScrollView>
-        <Text>{'123'}</Text>
-      </ScrollView>
       <FlatList
         inverted
+        ref={viewRef}
         style={styles.box}
-        onStartReachedThreshold={2}
-        maintainVisibleContentPosition={{
-          autoscrollToTopThreshold: 0,
-          minIndexForVisible: 1,
-        }}
-        onStartReached={() => {
-          setMessages((prev) => [...prev, ...messageFetcher(20)]);
-        }}
-        onEndReached={() => {
-          setMessages((prev) => [...messageFetcher(20), ...prev]);
-        }}
-        onLayout={(e) => console.log('flatlist', e.nativeEvent)}
+        onEndReached={onEndReached}
+        onStartReached={onStartReached}
         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 style={styles.message}>
+              <Text style={styles.messageText}>{item.message}</Text>
             </View>
           );
         }}
       />
-      <Pressable
-        style={{ width: 100, height: 100 }}
-        onPress={() => {
-          setMessages((prev) => [...messageFetcher(20), ...prev]);
-        }}
-      >
-        <Text>{'Load more'}</Text>
-      </Pressable>
-
-      <View style={{ width: layout, height: 20, backgroundColor: 'blue' }}>
-        <Pressable onPress={() => setLayout((prev) => (prev === 25 ? 50 : 25))}>
-          <Text>{'Change'}</Text>
-        </Pressable>
+      <View style={styles.buttons}>
+        <TouchableOpacity style={styles.button} onPress={() => viewRef.current?.scrollToEnd()}>
+          <Text>{'scroll to end'}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={() => viewRef.current?.scrollToOffset({ offset: 0 })}>
+          <Text>{'scroll to start'}</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -86,6 +90,28 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   box: {
+    backgroundColor: 'black',
+    flex: 1,
+  },
+  message: {
+    width: '100%',
+    backgroundColor: 'gray',
+    marginBottom: 4,
+    padding: 24,
+  },
+  messageText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  buttons: {
+    flexDirection: 'row',
+  },
+  button: {
     flex: 1,
+    height: 80,
+    margin: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#1b77ff',
   },
 });

package.json

@@ -52,8 +52,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@evilmartians/lefthook": "^1.2.2",
     "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
@@ -83,7 +83,6 @@
   "engines": {
     "node": ">= 16.0.0"
   },
-  "packageManager": "^[email protected]",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -123,6 +122,7 @@
       "prettier/prettier": [
         "error",
         {
+          "printWidth": 120,
           "quoteProps": "consistent",
           "singleQuote": true,
           "tabWidth": 2,
@@ -137,6 +137,7 @@
     "lib/"
   ],
   "prettier": {
+    "printWidth": 120,
     "quoteProps": "consistent",
     "singleQuote": true,
     "tabWidth": 2,

src/__tests__/deferred.test.ts

@@ -0,0 +1,26 @@
+import { deferred } from '../deferred';
+
+describe('deferred', () => {
+  it('resolves with correct value', async () => {
+    const deferredString = deferred<string>();
+    const expectedString = 'hello world';
+    setTimeout(() => {
+      deferredString.resolve(expectedString);
+    }, 1000);
+    const resultString = await deferredString.promise;
+    expect(resultString).toBe(expectedString);
+  });
+
+  it('rejects with correct reason', async () => {
+    const deferredError = deferred<Error>();
+    const expectedError = new Error('Something went wrong');
+    setTimeout(() => {
+      deferredError.reject(expectedError);
+    }, 1000);
+    try {
+      await deferredError.promise;
+    } catch (error) {
+      expect(error).toBe(expectedError);
+    }
+  });
+});

src/deferred.ts

@@ -0,0 +1,17 @@
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value?: T | PromiseLike<T>) => void;
+  reject: (reason?: any) => void;
+}
+
+export const deferred = <T>(): Deferred<T> => {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: any) => void;
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return { promise, resolve, reject } as Deferred<T>;
+};