diff --git a/Example/App.tsx b/Example/App.tsx
index 554b698..fa6b637 100644
--- 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
index aa7b350..b8a0e3a 100644
--- a/Example/src/FlatListExample.tsx
+++ b/Example/src/FlatListExample.tsx
@@ -16,18 +16,28 @@ const AddMoreButton = ({onPress}) => (
const ListItem = ({item}) => (
- List item: {item}
+ List item: {item.value}
);
+// 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 () => {
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
index 1f79356..dd9fe8e 100644
--- a/src/FlatList.tsx
+++ b/src/FlatList.tsx
@@ -20,17 +20,23 @@ export default (React.forwardRef(
const flRef = useRef | null>(null);
const { maintainVisibleContentPosition: mvcp } = props;
- const autoscrollToTopThreshold = useRef();
+ const autoscrollToTopThreshold = useRef();
const minIndexForVisible = useRef();
const cleanupPromiseRef = useRef>();
+ 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(