rn-fetch-blob Implementation for React Native for Windows

[avmoroz]

Created an implementation of rn-fetch-blob for React Native for Windows.

[stmoy]

We'll need to figure out what to do about this PR since it looks like this repo is no longer maintained (#666).

Even so, I think it's worthwhile to iterate here while we figure out that plan. In other words, lets see if we can get this PR as finished as possible so that wherever it ends up, it'll be clean and ready to go!

CC: @vmoroz @jonthysell @nickgerleman @asklar @bzoz - FYI

[stmoy]

@avmoroz - what's the status of this PR?

[avmoroz]

@stmoy - I got the project refactored into a component. I'm meeting with @vmoroz in about 2 hours (~3:30 pm) to address some concerns and questions about my refactoring.

I'm going to try and run this component in a new project to make sure it works with other projects.

I made the commit about an hour ago, but I'm not seeing the changes in this PR draft yet.

[jaimecbernardo]

Hi @avmoroz, I've tested this module with react-native-pdf on Windows and it doesn't seem to be behaving as expected. I've debugged a bit and was able to create some reproduction code based on react-native-pdf internals.

These are the App.js contents:

import React from 'react';
import {
  Button
} from 'react-native';

import RNFetchBlob from 'rn-fetch-blob';

const App: () => React$Node = () => {
  return (
    <Button title="Download a pdf file"
      onPress = { () => {
        const cacheFile = RNFetchBlob.fs.dirs.CacheDir + '/sample.pdf';
        RNFetchBlob.config({
          path: cacheFile,
          trusty: true
        }).fetch(
          'GET',
          'http://samples.leanpub.com/thereactnativebook-sample.pdf'
        ).then( 
          async (res) => {
            let a = 0;
            if (res && res.respInfo && res.respInfo.headers && !res.respInfo.headers["Content-Encoding"] && !res.respInfo.headers["Transfer-Encoding"] && res.respInfo.headers["Content-Length"]) {
              const expectedContentLength = res.respInfo.headers["Content-Length"];
              let actualContentLength;
                try {
                    const fileStats = await RNFetchBlob.fs.stat(res.path());
                    if (!fileStats || !fileStats.size) {
                        throw new Error("FileNotFound:" + source.uri);
                    }
                    actualContentLength = fileStats.size;
                    alert('Expected content length:' + expectedContentLength + ' Actual content length: ' + actualContentLength);
                } catch (error) {
                    alert("DownloadFailed: " + error);
                }
            } else {
              alert('Response headers were not the expected ones.');
            }
          }
        ).catch(
          (error) => alert("Fetch call failed: " + error)
        )
      }}
    />
  );
};

export default App;

This is the way I've set up the project on Windows:

npx react-native init TestRNFetchBlob --template react-native@^0.63.2
cd TestRNFetchBlob
npx react-native-windows-init --overwrite
yarn add joltup/rn-fetch-blob#701/head
npx react-native run-windows

On Windows, I get an alert with "Response headers were not the expected ones." and I find that no file seems to have been saved.

When running the same application for Android (npx react-native run-android), I get the message box with the "Expected content length" and "Actual content length" with equal values.

I hope this is helpful in getting similar behavior for the Windows implementation.

[asklar]

@jaimecbernardo good catch. I think the current PR is returning the content stream as the res, so the response info, headers, etc. is only used for progress notifications, and once it's completed, it is thrown away and not available to the JS code. Seems like a good thing to add if it is part of the module API/contract.

[RonRadtke]

Hey, I forked the repo and would like to try to maintain it. If anyone wants to help, feel free to contact me. After giving it a start with some fixes for Android I would like to integrate the windows implementation. I would bring it to npm too then Would that be OK for you? @asklar @avmoroz @stmoy @syedibrahimt

[asklar]

Hey, I forked the repo and would like to try to maintain it. If anyone wants to help, feel free to contact me. After giving it a start with some fixes for Android I would like to integrate the windows implementation. I would bring it to npm too then Would that be OK for you? @asklar @avmoroz @stmoy @syedibrahimt

that would be fine by me seeing as this repo is marked as unmaintained :) thanks for volunteering! Once things are up and running we should also update the reactnative.directory site.

[RonRadtke]

@asklar yes, absolutely right. I will see what I can get done the next days

[RonRadtke]

@avmoroz @asklar I integrated it in my repo here: https://github.com/RonRadtke/react-native-blob-util

[jaimecbernardo]

^ I've fixed the current build issues I was facing on this module with a #include <unknwn.h> in the module's pch.h file.

[br4in3x]

@avmoroz hello, for some reason I can not build the solution of the windows implementation in Visual Studio. First, I had to change this in the RNFetchBlob.vcxproj file:

<PropertyGroup Label="ReactNativeWindowsProps">
  <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
</PropertyGroup>

to

  <PropertyGroup Label="ReactNativeWindowsProps">
    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
  </PropertyGroup>

I'm running in a monorepo, so without this change, the solution is trying to load RNW from a location that doesn't contain RNW. Then, when I tried to build the project, I've got the following errors:

1>------ Build started: Project: RNFetchBlob, Configuration: Debug x64 ------
1>JsiApiContext.cpp
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(9,40): error C4430: missing type specifier - int assumed. Note: C++ does not support default-int
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(9,29): error C2146: syntax error: missing ';' before identifier '__ImageBase'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,5): error C2065: 'HMODULE': undeclared identifier
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,13): error C2146: syntax error: missing ';' before identifier 'currentDllHanlde'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,13): error C2065: 'currentDllHanlde': undeclared identifier
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,56): error C2061: syntax error: identifier 'HMODULE'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(35,101): error C2065: 'currentDllHanlde': undeclared identifier
1>C:\Program Files (x86)\Windows Kits\10\bin\10.0.18362.0\XamlCompiler\Microsoft.Windows.UI.Xaml.Common.targets(482,5): error MSB4181: The "CompileXaml" task returned false but did not log an error.

It's weird because it's errors in RNW.. And it's only happening for this project only, which means something in the solution makes errors to appear. Other community native modules are built fine.

I'm using react-native-windows 0.64.23.

[asklar]

@avmoroz hello, for some reason I can not build the solution of the windows implementation in Visual Studio. First, I had to change this in the RNFetchBlob.vcxproj file:

<PropertyGroup Label="ReactNativeWindowsProps">
  <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
</PropertyGroup>

to

  <PropertyGroup Label="ReactNativeWindowsProps">
    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
  </PropertyGroup>

I'm running in a monorepo, so without this change, the solution is trying to load RNW from a location that doesn't contain RNW. Then, when I tried to build the project, I've got the following errors:

1>------ Build started: Project: RNFetchBlob, Configuration: Debug x64 ------
1>JsiApiContext.cpp
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(9,40): error C4430: missing type specifier - int assumed. Note: C++ does not support default-int
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(9,29): error C2146: syntax error: missing ';' before identifier '__ImageBase'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,5): error C2065: 'HMODULE': undeclared identifier
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,13): error C2146: syntax error: missing ';' before identifier 'currentDllHanlde'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,13): error C2065: 'currentDllHanlde': undeclared identifier
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(34,56): error C2061: syntax error: identifier 'HMODULE'
1>C:\Users\HP\Code\f1\apps\MyHP\node_modules\react-native-windows\Microsoft.ReactNative.Cxx\JSI\JsiApiContext.cpp(35,101): error C2065: 'currentDllHanlde': undeclared identifier
1>C:\Program Files (x86)\Windows Kits\10\bin\10.0.18362.0\XamlCompiler\Microsoft.Windows.UI.Xaml.Common.targets(482,5): error MSB4181: The "CompileXaml" task returned false but did not log an error.

It's weird because it's errors in RNW.. And it's only happening for this project only, which means something in the solution makes errors to appear. Other community native modules are built fine.

I'm using react-native-windows 0.64.23.

@br4in3x please use the version in https://github.com/RonRadtke/react-native-blob-util/ - the joltup/rn-fetch-blob repo is unmaintained.