Fixed un-necessary calls to resetMvcpIfNeeded

Fixes - #6
GetStream · Feb 26, 2021 · f07267b · f07267b
1 parent f9b7211
commit f07267b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/Example/App.tsx b/Example/App.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-unused-vars
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import ScrollViewExample from './src/ScrollViewExample';
 import FlatListExample from './src/FlatListExample';

diff --git a/Example/src/FlatListExample.tsx b/Example/src/FlatListExample.tsx
@@ -16,18 +16,28 @@ const AddMoreButton = ({onPress}) => (
 
 const ListItem = ({item}) => (
  <View style={styles.listItem}>
- <Text>List item: {item}</Text>
+ <Text>List item: {item.value}</Text>
  </View>
 );
 
+// Generate unique key list item.
+export const generateUniqueKey = () =>
+ `_${Math.random().toString(36).substr(2, 9)}`;
+
 export default () => {
- const [numbers, setNumbers] = useState(Array.from(Array(10).keys()));
+ const [numbers, setNumbers] = useState(
+ Array.from(Array(10).keys()).map((n) => ({
+ id: generateUniqueKey(),
+ value: n,
+ })),
+ );
 
  const addToEnd = () => {
  setNumbers((prev) => {
- const additionalNumbers = Array.from(Array(5).keys()).map(
- (n) => n + prev[prev.length - 1] + 1,
- );
+ const additionalNumbers = Array.from(Array(5).keys()).map((n) => ({
+ id: generateUniqueKey(),
+ value: n + prev[prev.length - 1].value + 1,
+ }));
 
  return prev.concat(additionalNumbers);
  });
@@ -36,7 +46,10 @@ export default () => {
  const addToStart = () => {
  setNumbers((prev) => {
  const additionalNumbers = Array.from(Array(5).keys())
- .map((n) => prev[0] - n - 1)
+ .map((n) => ({
+ id: generateUniqueKey(),
+ value: prev[0].value - n - 1,
+ }))
  .reverse();
 
  return additionalNumbers.concat(prev);
@@ -49,10 +62,9 @@ export default () => {
  <View style={styles.listContainer}>
  <FlatList
  data={numbers}
- keyExtractor={(item) => item.toString()}
+ keyExtractor={(item) => item.id}
  maintainVisibleContentPosition={{
- autoscrollToTopThreshold: 20,
- minIndexForVisible: 0,
+ minIndexForVisible: 1,
  }}
  renderItem={ListItem}
  />

diff --git a/src/FlatList.tsx b/src/FlatList.tsx
@@ -20,17 +20,23 @@ export default (React.forwardRef(
  const flRef = useRef<FlatList<T> | null>(null);
  const { maintainVisibleContentPosition: mvcp } = props;
 
- const autoscrollToTopThreshold = useRef<number>();
+ const autoscrollToTopThreshold = useRef<number | null>();
  const minIndexForVisible = useRef<number>();
  const cleanupPromiseRef = useRef<Promise<any>>();
 
+ const getAutoscrollToTopThresholdFromProp = () =>
+ mvcp?.autoscrollToTopThreshold || -Number.MAX_SAFE_INTEGER;
+
+ const getMinIndexForVisibleFromProp = () => mvcp?.minIndexForVisible || 1;
+
  const resetMvcpIfNeeded = (): void => {
  if (!mvcp || Platform.OS !== 'android' || !flRef.current) {
  return;
  }
  if (
- autoscrollToTopThreshold.current === mvcp.autoscrollToTopThreshold &&
- minIndexForVisible.current === mvcp.minIndexForVisible
+ autoscrollToTopThreshold.current ===
+ getAutoscrollToTopThresholdFromProp() &&
+ minIndexForVisible.current === getMinIndexForVisibleFromProp()
  ) {
  // Don't do anythinig if the values haven't changed
  return;
@@ -41,9 +47,8 @@ export default (React.forwardRef(
  MvcpScrollViewManager.disableMaintainVisibleContentPosition(handle);
  });
 
- autoscrollToTopThreshold.current =
- mvcp.autoscrollToTopThreshold || -Number.MAX_SAFE_INTEGER;
- minIndexForVisible.current = mvcp.minIndexForVisible || 0;
+ autoscrollToTopThreshold.current = getAutoscrollToTopThresholdFromProp();
+ minIndexForVisible.current = getMinIndexForVisibleFromProp();
 
  const viewTag = findNodeHandle(flRef.current);
  cleanupPromiseRef.current = MvcpScrollViewManager.enableMaintainVisibleContentPosition(