DuDigital/react-native-zoomable-view

Inner view gestures not working properly

naveed1239 opened this issue · 3 comments

I have added "react-native-pdf" as a child view and pdf scrolling is not working properly.

Hey @naveed1239 ,
can you please try whether setting the captureEvent prop to true works?
Generally, it is quite complicated to handle the gestures in subviews, because there could be a conflict with it.

Hey @naveed1239 ,
can you please try whether setting the captureEvent prop to true works?
Generally, it is quite complicated to handle the gestures in subviews, because there could be a conflict with it.

I have already set the "captureEvent" prop to "true" but it's not working. If i am putting the pdf or html views outside the "ReactNativeZoomableView" user able to scroll it smoothly but when I put it inside "ReactNativeZoomableView" user not able to scroll it smoothly. Below is my code
<ReactNativeZoomableView
maxZoom={maxZoomValue}
minZoom={minZoomValue}
zoomStep={zoomingValue}
initialZoom={zoom}
zoomEnabled={zoomEnabled}
bindToBorders
captureEvent={true}
onZoomEnd={(
event: any,
gestureState: any,
zoomableViewEventObject: { lastZoomLevel: any; zoomLevel: any }
) => {
if (zoomableViewEventObject) {
setZoomPercentage(zoomableViewEventObject.zoomLevel);
}
}}

      style={{
        zIndex: -10,
      }}
    >
      {contentType === "Html" && (
        // <View testID="htmlContainer" style={{ flex: 1 }}>
        <TouchableWithoutFeedback
          style={{ width: "100%", height: "100%" }}
          onPress={showAndHideHeaderView}
        >
          <WebView
            source={{
              uri: `${BaseURL()}/${filePath}`,
            }}
            onHttpError={() => {
              DisplayAlertWithActions({
                title: MultiLanguageSupport.SometingWentWrong,
                message: MultiLanguageSupport.HtmlNotAvailable!,
                okAction: () => {},
              });
            }}
            onError={() => {
              errorLoadingContent(
                MultiLanguageSupport.HtmlNotAvailable!,
                "error_loading_html_page"
              );
            }}
            onLoad={() => {
              callAddToRecentlyView();
              addEventToFB("html_page_loaded");
            }}
            style={{
              flex: 1,
              zIndex: 10,
              elevation: 10,
            }}
          />
        </TouchableWithoutFeedback>
        // </View>
      )}

Unfortunately I am not sure if this problem can be solved, because it's a gesture listener problem.
Both of our packages try to access them and steal them away from each other.

Maybe you can try with custom buttons or something.
Here are the details:
https://github.com/DuDigital/react-native-zoomable-view/releases/tag/v1.1.0

I will close this for now, because I think this is not a specific problem in this package.
If somebody has a solution for this. Please comment here. We would really appreciate it!