DuDigital / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
243 stars 113 forks source link

Inner view gestures not working properly #58

Closed naveed1239 closed 3 years ago

naveed1239 commented 3 years ago

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

SimonErich commented 3 years ago

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.

naveed1239 commented 3 years ago

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>
      )}
SimonErich commented 3 years ago

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!