ScrollView & FlatList ceveats...

scrollview.md

ScrollView

onMomentumScrollEnd

Some mention onMomentumScrollEnd will fire multiple times. To solve it we need a solution that will not trigger re-rendering like Ref or SharedValue (Reanimated 2)

  import { useSharedValue } from 'react-native-reanimated';
  const canMomentum = useSharedValue(false); // or use `useRef` API

solution:

  const onMomentumScrollBegin = ({ nativeEvent }) => {
    canMomentum.value = true;

    console.log(Date.now(), 'onMomentumScrollStart', nativeEvent);
  };

  const onMomentumScrollEnd = ({ nativeEvent }) => {
    if (canMomentum.value) {
      console.log(Date.now(), 'onMomentumScrollEnd', nativeEvent);
      // your stuff
    } else {
      console.log(Date.now(), 'onMomentumScrollEnd dropped', nativeEvent);
    }

    canMomentum.value = false;
  };
  

and try to make the content height as static as possible. using flashlist will not trigger unneccessary re-render.

FlatList

onEndReached

onEndReached will fire once when the end of the list is visible under this two condition:

• the current list is too short so the end exposed
• the user scroll to the end of the list (overdrag)

the expected behaviour actually is to fill the list until the end isn't expose

so control your event fire and stop crawling when all data received.

RefreshControl

This one is...complex when you group it with native header searchbar (UISearchController after iOS11 [ref])

• iOS: see Mail App
• Android: Toolbar ActionView. https://developer.android.com/develop/ui/views/components/appbar/action-views

read more:

• https://stackoverflow.com/questions/50378860/flatlist-onendreached-endless-loop
• https://stackoverflow.com/questions/69902066/react-native-flatlist-onmomentumscrollend