Scrolling PDF is laggy on android but smooth on ios

[DebNeUIbm]

What react-native version are you using? 0.65.1

What react-native-pdf version are you using? 6.4.0

What platform does your issue occur on? (android/ios/both) android

Describe your issue as precisely as possible : 1) Steps to reproduce the issue or to explain in which case you get the issue

         <View style={{ flex: 1 }}>
            <ScrollView contentContainerStyle={{ flex: 1 }}>
              <Pdf
                source={{
                  uri,
                  cache: true,
                }}
                style={{ flex: 1 }}
                onError={(error) => { console.error(error); }}
              />
            </ScrollView>
          </View>

   Using the react-native-pdf package like above, tried with and without the surrounding View tag, but in android scrolling 
   behaviour is still choppy.

[JeffreyVanelderenACA]

I've found a workararound, see: https://github.com/wonday/react-native-pdf/issues/448#issuecomment-1117216273

[KarlyLamm]

Adding a scrollView solves the scrolling issue, but then you lose the ability to pinch & zoom. Issue is still a problem

[Niltonsf]

Any fixes for this, the pinch & zoom seems to be a problem. It seems to pinch on steps on android, iphone works correctly

[LyDawei]

Any luck on this?

[Niltonsf]

Unfortunately not

[Fagner3g]

Any luck on this?

[rada]

I was able to get the scroll working on Android using the setNativeProps. Although you sometimes need to touch twice, it's the closest way how I was able to get it working smoothly on Android.

export function useDisableNativePropsScroll<ScrollView>(): {
  enableNativePropsScroll: () => void;
  disableNativePropsScroll: () => void;
  scrollViewRef: React.RefObject<ScrollView>;
} {
  const scrollViewRef = useRef<ScrollView>(null);

  const disableNativePropsScroll = useCallback(() => {
    // @ts-expect-error for SrollView ref as null
    scrollViewRef.current?.setNativeProps({ scrollEnabled: false });
  }, [scrollViewRef]);

  const enableNativePropsScroll = useCallback(() => {
    // @ts-expect-error for SrollView ref as null
    scrollViewRef.current?.setNativeProps({ scrollEnabled: true });
  }, [scrollViewRef]);

  return { scrollViewRef, disableNativePropsScroll, enableNativePropsScroll };
}

And then use with the PDF component:

const { scrollViewRef, disableNativePropsScroll, enableNativePropsScroll } =
    useDisableNativePropsScroll<ScrollView>();

...
return (
  <ScrollView ref={scrollViewRef}>
    <View onTouchStart={disableNativePropsScroll} onTouchEnd={enableNativePropsScroll}>
       <Pdf
          source={{ uri: 'URL_to_some.pdf' }}
          style={{ height: 300 }}
          trustAllCerts={false}
       />
    </View>
  </ScrollView>
}

[Mapalo04]

I solved it by including the pageCount for example: <Pdf trustAllCerts={false} source={source} onLoadComplete={(numberOfPages,filePath) => { console.log(Number of pages: ${numberOfPages}); setPages(numberOfPages); }} onPageChanged={(page,numberOfPages) => { console.log(Current page: ${page}); }} onError={(error) => { console.log(error); }} onPressLink={(uri) => { console.log(Link pressed: ${uri}); }} pageCount={21} horizontal={false} style={styles.pdf}/>