react-native-documents
error NU1201: Project ReactNativeDocumentPicker is not compatible with native (native,Version=v0.0). Project ReactNativeDocumentPicker supports: uap10.0.16299 (UAP,Version=v10.0.16 299)
Bug report
Summary
After starting a new project with react-native-windows and installing this package "react-native-document-picker", it gives me the title of this issue error. For now is there any workarround?
Reproducible sample code
Using only template code...
Steps to reproduce
Newly created project with command lines:
npx react-native init lenaStoreGep3 --template react-native@^0.68.0
cd .\lenaStoreGep3\
npx react-native-windows-init --overwrite
npx react-native autolink-windows
npm install --save react-native-document-picker
npx react-native autolink-windows
npx react-native run-windows
And it comes back with this error:
\node_modules\react-native-document-picker\windows\ReactNativeDocumentPicker\ReactNativeDocumentPicker.csproj : error NU1201: Project Microsoft.ReactNative is not compatible with uap10.0.16299 (UAP,Version=v10.0.16299). Project Microsoft.ReactNative supports: native (native,Version=v0.0)
Environment info
package.json
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"windows": "react-native run-windows"
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-document-picker": "^8.1.0",
"react-native-windows": "0.68.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2",
"metro-config": "^0.67.0"
},
"jest": {
"preset": "react-native"
}
npx react-native info output:
System:
OS: Windows 10 10.0.19044
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 22.78 GB / 31.95 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 29, 30, 31, 32
Build Tools: 28.0.3, 32.0.0, 32.1.0
System Images: android-29 | Android TV Intel x86 Atom, android-29 | ARM 64 v8a, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Android TV Intel x86 Atom, android-30 | China version of Wear OS 3 - Preview Intel x86 Atom, android-30 | Wear OS 3 - Preview ARM 64 v8a, android-30 | Wear OS 3 - Preview Intel x86 Atom, android-30 | ARM 64 v8a, android-30 | Intel x86 Atom_64, android-30 | Google TV Intel x86 Atom, android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64, android-31 | Android TV Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Intel x86 Atom_64, android-31 | Google TV Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.10240.0, 10.0.10586.0, 10.0.14393.0, 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
IDEs:
Android Studio: Version 2021.1.0.0 AI-211.7628.21.2111.8193401
Visual Studio: 16.11.32428.217 (Visual Studio Community 2019)
Languages:
Java: 1.8.0_302 - C:\Program Files\Eclipse Foundation\jdk-8.0.302.8-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-windows: 0.68.3 => 0.68.3
npmGlobalPackages:
*react-native*: Not Found
library version: ^8.1.0
react-native-windows: 0.68.3
hello, thanks for reporting. Unfortunately, I do not run windows, so the support for it is not really guaranteed.
If you could fix this and contribute the fix in a PR, that would be wonderful.
Thank you!
hello, thanks for reporting. Unfortunately, I do not run windows, so the support for it is not really guaranteed.
If you could fix this and contribute the fix in a PR, that would be wonderful.
Thank you!
I do not have that high level knowledge to know how to fix this problem :\
@qmatteoq and @sanjeevjadhav15 is this something you might have some insight into? I think there's a min react-native-windows version somewhere that is causing issues here? Sorry I can't be more helpful, but we're also not sure how to address this issue.
Looks like they have a suggestion over on react native for windows: https://github.com/microsoft/react-native-windows/issues/10059#issuecomment-1147975392
@jonthysell, I tried the work-around with the Directory.Build.props and didn't have any success. Could you suggest/drop a pull request in this project with the experimental.props change you suggested (I don't really understand what that means, and it sounds like there isn't a lot of Windows support on this project)? Any help you can lend would be awesome, as this is blocking us from upgrading to react-native/react-native-windows 0.69.1.
Still getting the following output
error NU1201: Project Microsoft.ReactNative is not compatible with uap10.0.16299 (UAP,Version=v10.0.16299). Project Microsoft.ReactNative supports: native (native,Version=v0.0)
Even after creating a Directory.Build.props ref'ing 10.0.19041.0 in the project directory, one level above node_modules (also tried adding it inside the node_modules, but nothing changed).
None of the obvious changes worked, so we went "back to the drawing board".
Turns out the official RNW docs has a very vague sketch of a native module with the Windows Picker: https://microsoft.github.io/react-native-windows/docs/native-modules-async#executing-calls-to-api-on-the-ui-thread
We wanted to show an open file picker and bring the contents back to JS. https://docs.sheetjs.com/docs/demos/desktop/#react-native-windows is a complete demo from scratch, but the highlight is:
REACT_MODULE(DocumentPicker);
struct DocumentPicker
{
/* The context must be stored when the module is initialized */
REACT_INIT(Initialize);
void Initialize(const ReactContext& reactContext) noexcept {
context = reactContext;
}
REACT_METHOD(PickAndRead);
void PickAndRead(ReactPromise<winrt::hstring> promise) noexcept {
auto prom = promise;
/* perform file picker action in the UI thread */
context.UIDispatcher().Post([prom = std::move(prom)]()->winrt::fire_and_forget {
auto p = prom; // promise -> prom -> p dance avoids promise destruction
/* create file picker */
winrt::Windows::Storage::Pickers::FileOpenPicker picker;
picker.SuggestedStartLocation(PickerLocationId::DocumentsLibrary);
picker.FileTypeFilter().Append(L".xlsx");
picker.FileTypeFilter().Append(L".xls");
/* show file picker */
StorageFile file = co_await picker.PickSingleFileAsync();
if(file == nullptr) { p.Reject("File not Found"); co_return; }
/* read data and return base64 string */
auto buf = co_await FileIO::ReadBufferAsync(file);
p.Resolve(CryptographicBuffer::EncodeToBase64String(buf));
co_return;
});
}
private:
ReactContext context{nullptr};
};
The JS integration is straightforward when added to an app directly (and there is presumably a similar integration for modules):
// at the top of App.js
import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
const DocumentPicker = getEnforcing('DocumentPicker');
// ... whenever the picker should be called
const b64 = await DocumentPicker.PickAndRead();
@vonovak with some work, the entire library interface can be implemented in this manner. Would you entertain a complete replacement of the existing C# module with a C++ one? The compatibility matrix suggests that a C++ module would have broader compatibility than a C# module.
