ReactNative FlatList refreshing UI bug

[badsyntax]

Hi

I'm having a hard time using react-query with the react-native FlatList component.

I'm using the isFetching prop of useQuery to pass to the FlatList refreshing prop. When the FlatList is refreshed, I'm seeing a weird UI glitch where the FlatList RefreshControl shows, then hides and shows again. This UI glitch is most obvious on Android but it affects iOS too.

Here's a simple example that demonstrates the UI bug:

const { newsApi } = useApiClient();

const { isFetching, refetch } = useQuery('api/getNews', () =>
  newsApi.getNews({
    sort: SortType.Top,
    start: 0,
    count: 30,
  })
);

return (
  <FlatList
    refreshing={isFetching}
    onRefresh={() => {
      refetch();
    }}
    data={[]}
    renderItem={({ item }) => {
      return <NewsListItem item={item} onVoteNews={onVoteNews} />;
    }}
  />
);

The workaround I'm using is to use a different state variable for the refreshing state, and update that state variable whenever onRefresh is called:

const { newsApi } = useApiClient();

const { isFetching, refetch } = useQuery('api/getNews', () =>
  newsApi.getNews({
    sort: SortType.Top,
    start: 0,
    count: 30,
  })
);

const [isRefreshing, setIsRefreshing] = useState<boolean>(isFetching);

useEffect(() => {
  setIsRefreshing(isFetching);
}, [isFetching]);

return (
  <FlatList
    refreshing={isRefreshing}
    onRefresh={() => {
      setIsRefreshing(true);
      refetch();
    }}
    data={[]}
    renderItem={({ item }) => {
      return <NewsListItem item={item} onVoteNews={onVoteNews} />;
    }}
  />
);

This workaround is pretty ridiculous but it works.

To try understand why this bug occurs with the FlatList component, I can demonstrate the issue with the following code:

const [isRefreshing, setIsRefreshing] = useState<boolean>(false);

return (
  <FlatList
    refreshing={isRefreshing}
    onRefresh={() => {
      setTimeout(() => {
        setIsRefreshing(true);
      }, 1);
    }}
    data={[]}
    renderItem={({ item }) => {
      return <NewsListItem item={item} onVoteNews={onVoteNews} />;
    }}
  />
);

The above shows that if I don't immediately set isRefreshing, the FlatList component will hide the refresh control, then show it again producing the UI bug.

So it seems like react-query is using a timeout. Is there any way to disable the setTimeout when calling refetch() or queryClient.invalidateQueries() to allow me to use isFetching with the FlatList component?

This is the query client config i'm using:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 0,
    },
  },
});

I appreciate any suggestions. thanks.