Inner view gestures not working properly

[naveed1239]

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

[SimonErich]

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]

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]

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!