How to intercept download link before it goes to Android Download Manager?

[ydhnwb]

Bug description:

I have metabase that can download/export the file to xlsx, json or csv. When I tap the export button (web view), It shows toast "Downloading", maybe it is from default webviewer/browser, but the Downloads will never be succeed. It wil shows "Download failed" after some minutes.

But when I try to load the metabase chart in browser like Chrome (android) and then tap export, the download works flawlessly.

I dont know why but looks like it cannot download a file inside webview app. If its true, how to intercept the tap button? So I can handle the download manually? Using onNavigationStateChange is not working because it remains on the same url or page.

Also Ive added permission to WRITE_EXTERNAL_STORAGE but still not working.

To Reproduce:

Load a metabase chart to your webview in react native. Then tap export. It will shows "Downloading" toast but it will failed after some minutes. Only happen in webview inside app, it works correctly on browser chrome etc

Expected behavior:

It should be download success. OR if it is not possible, How to intercept tap button?

Screenshots/Videos:

2022-03-10.14-03-18.mp4

Screenshot of unsuccessful download:

Environment:

• OS: Android
• OS version: Android 11
• react-native version: 0.65.1
• react-native-webview version: 11.17.2

[ydhnwb]

I fixed this with onShouldStartWithRequest then check the url if it contains an xlsx/csv (it means to be export url). And manually download it with RNFS

          <WebView
            onShouldStartLoadWithRequest={request => {
              try {
                if (request?.url) {
                  const chunked = request.url.split('/')
                  if (
                    chunked[chunked.length - 1] == 'xlsx?' ||
                    chunked[chunked.length - 1] == 'csv?' ||
                    chunked[chunked.length - 1] == 'json?'
                  ) {
                    handleExport(request.url, chunked[chunked.length - 1].replace('?', ''))
                    return false
                  }
                }
                return true
              } catch (e) {
                console.log('error onShouldStartWithReq:', e)
                return true
              }
            }}
            style={[
              styles.webView,
              dimensions.window.height > dimensions.window.width
                ? {width: dimensions.window.width, height: dimensions.window.height * 1.35}
                : {width: dimensions.window.width, height: dimensions.window.height * 2.5},
            ]}
            source={{uri: iframeUrl}}
          />

[Praveen-CP]

@ydhnwb can you please share the complete code example here