# Preserve FlatList Scroll Position In React Native • Obsidian Garden
Sometimes you need to keep scroll position of FlatList in React Native after some user interactions.

# Preserve FlatList Scroll Position In React Native

Sometimes you need to keep scroll position of `FlatList` in React Native after some user interactions.

    // interact() is doing some stuff, that changes FlatList scroll sizetype Props = { interact: () => void; }const SomeList: FC<Props> = ({ interact }) => {  const scrollPosition = useRef(0);  const scrollHeight = useRef(0);    // set it to `true` before interaction and back to `false` right after  const shouldKeepScrollPosition = useRef(false);  const onScroll = useCallback(    (event: NativeSyntheticEvent<NativeScrollEvent>) => {      scrollPosition.current = event.nativeEvent.contentOffset.y;    },    [],  );  const onContentSizeChange = useCallback((_: number, h: number) => {    if (!shouldKeepScrollPosition.current) {      scrollHeight.current = h;      return;    }    ref.current?.scrollToOffset({      offset: scrollPosition.current + (h - scrollHeight.current),      animated: false,    });    scrollHeight.current = h;  }, []);  // onInteraction wraps interaction to preserve scroll position  const onInteraction = useCallback(    () => {      shouldKeepScrollPosition.current = true;      setTimeout(() => {        interact();      }, 0);      setTimeout(() => {        shouldKeepScrollPosition.current = false;      }, 500);    },    [setSelectedSubThemes],  );    return (    <FlatList      // ...required FlatList options      ref={ref}      onContentSizeChange={onContentSizeChange}      onRefresh={onRefresh}      onScroll={onScroll}    />  )}