react-native-gesture-handler: ScrollView breaks RefreshControl on Android

I had the same issue with the scrollview from react-native-gesture-handler tried so many methods finally i just switched to scrollview from react-native to solve this issue

I debugged this for a bit and looks like refresh control is getting interrupted by scroll view (that has disallowInterruption: true). I’m considering some solutions to this problem but I want to avoid adding a special case for ScrollView.

As a workaround for now, you can wrap Refresh Control in NativeView Gesture handler and use waitFor with it:

export const RefreshControl = createNativeWrapper(RNRefreshControl, {
  disallowInterruption: true,
  shouldCancelWhenOutside: false,
});

const refreshRef = useRef(null);

<ScrollView	waitFor={refreshRef} refreshControl={<RefreshControl ref={refreshRef} />}>
	{/* ... */}
</ScrollView>

import React, { useCallback, useRef } from 'react';
import { View, Text, RefreshControl as RNRefreshControl } from 'react-native';
import { createNativeWrapper, ScrollView } from 'react-native-gesture-handler';

const RefreshControl = createNativeWrapper(RNRefreshControl, {
  disallowInterruption: true,
  shouldCancelWhenOutside: false,
});

const wait = (timeout: number) => {
  return new Promise<number>((resolve) => {
    setTimeout(resolve, timeout);
  });
};

export default function App() {
  const refreshRef = useRef(null);
  const [refreshing, setRefreshing] = React.useState(false);
  console.log(refreshing);
  const onRefresh = useCallback(() => {
    setRefreshing(true);

    void wait(1000).then(() => setRefreshing(false));
  }, []);

  return (
    <ScrollView
      waitFor={refreshRef}
      style={{ flex: 1 }}
      refreshControl={
        <RefreshControl
          ref={refreshRef}
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }>
      <View
        style={{
          height: 2000,
          paddingTop: 64,
          backgroundColor: 'pink',
          alignItems: 'center',
        }}>
        <Text>Pull down to see RefreshControl indicator</Text>
      </View>
    </ScrollView>
  );
}

I had this issue as well, switched the import of ScrollView from ‘react-native-gesture-handler’ to ‘react-native’ , to get it to work for now

I ran into this issue today as well. A RNGH scrollview with content that is large enough to scroll. Adding a RefreshControl. And it doesn’t work. If the content is small enough that no scrolling is needed it does work. Im 100% sure this worked a few months ago when i build these screens.

Any idea on how to fix this properly? And what are the downsides of using the RN scrollview? this was never 100% clear to me (why the RNGH scrollview is better).

edit: @jakub-gonet can you comment on this?

In case this can help anybody using a custom wrapper, this fixed the issue for me :

return (
        <RefreshControlRN
            refreshing={isRefreshing}
            tintColor={tokensColors.warmWhite}
            // See https://github.com/facebook/react-native/issues/32144
            {...props}
            onRefresh={onRefresh}
        />
    );

I am experiencing the exact same issue as above. Having a wrapper that encapsulates the states and custom styles is preventing the rendering of children, only in Android. Trying to switch ScrollView / RefreshControl for the react-native ones did not help I am using RN 0.70.3 and react-native-gesture-handler 2.8.0

@janicduplessis, I tried to reproduce it and seems like it’s not working. After replacing ScrollView with RN one it still doesn’t work. It’s a problem with RNGH though, I’ll try to deep deeper into that.

In my case the content is not being rendered. I am using a VirtualList and ScrollView in some places to implement PullToRefresh functionality. I am using memoized JSX and passing it to the refreshControl prop of ScrollView/VirtualList.

 const PullToRefreshJSx = useMemo(
    () => (
      <PullToRefresh
        refetchData={async () => {
          await refetchData(false);
        }}
      />
    ),
    [refetchData]
  );
  
// PullToRefresh Component //
  
export function PullToRefresh({
  refetchData,
}: {
  refetchData: () => Promise<void>;
}) {
  const Snackbar = useSnackBar();
  const [isRefreshing, setIsRefreshing] = useState(false);

  const onRefresh = useCallback(async () => {
    setIsRefreshing(true);

    try {
      await refetchData();
    } catch (err) {
      alertFromBeError(err, Snackbar);
    } finally {
      setIsRefreshing(false);
    }
  }, [refetchData, Snackbar]);

  return <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />;
}

However when I am directly using the component like this, its working fine for me in Android Platform.

react-native-version:0.68.2

This issue also exists when importing FlatList from react-native-gesture-handler and wrapping it in react-native-reanimated Animated.createAnimatedComponent. Wrapping RefreshControl in createNativeWrapper does not resolve the issue. The pull to refresh event fails to fire on Android as demonstrated in this Snack.

A work around is to import FlatList directly from react-native, not wrap the component in reanimated and set the Animated value manually on the FlatList onScroll event, but this is far less performant than using Animated.Event and ends up blocking the UI thread on slow devices.

@vivekjm Error is gone after following what you wrote, but content inside ScrollView is not shown as @pke mentioned.

EDIT: I noticed that when I import a component that returns RefreshControl, the content of ScrollView is not shown, but when I use RefreshControl directly with ScrollView it works as expected (Android physical device).

You can use renderScrollComponent prop to pass ScrollView with those props set. Or you can patch-package RNGH to apply this patch from master and use waitFor with ref directly on FlatList.

@FRizzonelli no i have not 😦

Same here. I tried multiple times, and few of the times it worked. Is it the same with you that randomly it works?

Hmm strange, I can repro using the same code in my app by replacing everything in App.js, but can’t repro in snack. Issue might be related to the react-native version I’m using in my app, will investigate more.

@jakub-gonet do you maybe have time to prioritize this one?

@janicduplessis

I got it working by putting a ScrollView inside a ScrollView so the code looks like this:

<PanGestureHandler>
 <ScrollView>
  <ScrollView refreshControl={<RefreshControl />}>
   // rest
  </ScrollView>
 </ScrollView>
</PanGestureHandler>

What side effects should I expect ?