A fix for two issues with FlatList still prevalent on React Native 0.72.4

onEndReachedFix.tsx

const onEndReachedFixData: ModelData[] = [{id: "placeholder"}];
const onEndReachedFixRenderItem = () => null;

interface IUseOnEndReachedFix<Data> {
  data: Data[];
  key?: string;
  onEndReachedThreshold?: number;
  onEndReached?: () => any;
  initialLoaded?: boolean;
  renderItem?: any;
}
const useOnEndReachedFix = <Data, >({
  data: _data,
  onEndReachedThreshold,
  onEndReached,
  initialLoaded,
  renderItem: _renderItem,
}: IUseOnEndReachedFix<Data>) => {
  // If the data was initially loaded, we want it to render and array with one item in it so that onEndReached
  // will load properly when we get to the end of the list.
  // Read Here: https://github.com/facebook/react-native/issues/41344#issuecomment-1796128635
  // And Here: // https://github.com/facebook/react-native/issues/36766#issuecomment-1808401156
  const data = _data?.length || initialLoaded ? _data : onEndReachedFixData;
  const renderItem = data === onEndReachedFixData ? onEndReachedFixRenderItem : _renderItem;

  return {
    data,
    renderItem,

    // This is a separate problem
    // When you have an empty array (like the initial state of "items"), it's calling onEndReached. 🤦
    //  https://github.com/facebook/react-native/pull/39574
    onEndReached: data?.length && data !== onEndReachedFixData ? onEndReached : null,
    // onEndReached: onEndReached,
    onEndReachedThreshold,
  }
}