Incopatible with react-native-windows (^0.70.xx)

[hpcrycki]

Description

I tried to integrate lottie-react-native with react-native-window but I got multiple issues.
In the beginning, I installed the package using yarn.
When I tried to integrate with LottieView I got this error: Invariant Violation: requireNativeComponent: "LottieAnimationView" was not found in the UIManager.
I saw that the lottie-react-native inside the node-modules folder and I didn't find any windows folder that needed to be loaded in the project.
I added it manually (https://github.com/lottie-react-native/lottie-react-native/tree/master/packages/core) and I made all the setup using documentation (https://github.com/lottie-react-native/lottie-react-native#windows-react-native--063) and I got the following errors on building the solution.

Env info:
-react-native-windows: ^0.70.xx
-lottie-react-native: v6.4.1

[matinzd]

Unfortunately the support for windows is very minimal right now and we don't have anyone to work on it. I will keep this issue open in case someone volunteers to fix windows issues.

[Victor0814gui]

@hpcrycki, I tested the versions of react-native-window 70.20, 71.30, 72.19, and they worked well. The error indicates that the lottie-react-native project uses <TargetPlatformMinVersion>10.0.16299.0</TargetPlatformMinVersion>, whereas your application uses <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>, causing an incompatibility. However, you can redirect the TargetPlatformMinVersion of lottie-react-native to use 10.0.17763.0 either through Visual Studio or manually redirect it.

[hpcrycki]

@Victor0814gui Thanks for your response. Can you please share with me your code, I want to use it as an example if it is possible.
Moreover, is it working as per in the documentation:
<LottieView source={require("../path/to/animation.json")} autoPlay loop />

Which type of windows app are you using?
Thanks!

[Victor0814gui]

I confess it was challenging for me to add this to a project, haha. I'll create a basic example repository with Lottie configuration and the steps you need to follow.

I believe windows app refers to using C# or C++, right? I've tested it on both project types, and it worked well. However, in Windows, the component must be added like this: <LottieView source={"Animation"} autoPlay loop /> since it becomes available at runtime, and all you need to do is pass the animation's name.

[hpcrycki]

@Victor0814gui I think the correct question is: What type of application you created is wpf or uwp?
Is not possible to load the JSON from react, as they said in the documentation?
Without this part:
<LottieAnimation Include="Assets/Animations/MyAnimation.json" Name="MyAnimation" />

[Victor0814gui]

Sorry, I didn't understand the question.😅 All the versions I created were with UWP. You're right, animations only work this way with uwp cpp. However, uwp c# works with animations loaded from React.

[Victor0814gui]

@hpcryck I put this together https://github.com/Victor0814gui/lottie-6.4.1-windows, tell me if it works for you too.

2023-11-28.19-10-49.mp4

[hpcrycki]

@Victor0814gui thanks for your fast responses. Can you please share with me the tsconfig.json.
I am trying to run yarn build and I got this issue:

When I try to load the C++ project in VS 2019 ( https://github.com/Victor0814gui/lottie-6.4.1-windows/blob/main/windows/cppwinrt/LottieReactNative.sln ) I got this error:

[Victor0814gui]

Sorry for the delay, I ended up losing my schedule 😥. I'll try this now.

[TheRogue76]

Any updates? We don't personally have windows devices to test this out on, so any info is appreciated

[Victor0814gui]

I'm stuck on this issue as well, using the repository https://github.com/Victor0814gui/lottie-6.4.1-windows. I've tested it on all versions of React Native 0.70.x, and it worked perfectly. My suspicion is that it might be because I'm using Visual Studio 2022. I'll need some time to reinstall 2019 and test this again.

[AkshatSoni26]

you need to install windows sdk for this issue. it works for.

https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/set-up-your-development-environment?tabs=cs-vs-community%2Ccpp-vs-community%2Cvs-2022-17-1-a%2Cvs-2022-17-1-b

[AkshatSoni26]

I stuck here, I don't understand what problem is occur.

steps to reproduce

step 1.

install dependenices npm i

step 2.

goto 'windows\sampleDesktop\sampleDesktop.vcxproj' this file and add this code to after this Microsoft.Cpp.targets

<PropertyGroup Label="LottieReactNativeProps">
    <LottieReactNativeDir>$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\lottie-react-native\package.json'))\node_modules\lottie-react-native</LottieReactNativeDir>
</PropertyGroup>
<ImportGroup Label="LottieReactNativeTargets">
    <Import Project="$(LottieReactNativeDir)\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" />
</ImportGroup>

step 3.

install these NuGet packages:

LottieGen.MsBuild
Microsoft.UI.Xaml

step 4.

add this code to 'windows\sampleDesktop\App.cpp' this file

#include <winrt/LottieReactNative.h>
#include <winrt/AnimatedVisuals.h>

...

PackageProviders().Append(winrt::LottieReactNative::ReactPackageProvider(winrt::AnimatedVisuals::LottieCodegenSourceProvider()));

system info:-

.NET SDK:
 Version:           8.0.202
 Commit:            25674bb2f4
 Workload version:  8.0.200-manifests.8cf8de6d

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19045
 OS Platform: Windows
 RID:         win-x64
 Base Path:   C:\Program Files\dotnet\sdk\8.0.202\

.NET workloads installed:
 [maui-windows]
   Installation Source: VS 17.9.34723.18
   Manifest Version:    8.0.7/8.0.100
   Manifest Path:       C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.maui\8.0.7\WorkloadManifest.json
   Install Type:        FileBased

 [maccatalyst]
   Installation Source: VS 17.9.34723.18
   Manifest Version:    17.2.8004/8.0.100
   Manifest Path:       C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.maccatalyst\17.2.8004\WorkloadManifest.json
   Install Type:        FileBased

 [ios]
   Installation Source: VS 17.9.34723.18
   Manifest Version:    17.2.8004/8.0.100
   Manifest Path:       C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.ios\17.2.8004\WorkloadManifest.json
   Install Type:        FileBased

 [android]
   Installation Source: VS 17.9.34723.18
   Manifest Version:    34.0.52/8.0.100
   Manifest Path:       C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.android\34.0.52\WorkloadManifest.json
   Install Type:        FileBased


Host:
  Version:      8.0.3
  Architecture: x64
  Commit:       9f4b1f5d66

.NET SDKs installed:
  6.0.420 [C:\Program Files\dotnet\sdk]
  8.0.202 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 6.0.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 8.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 6.0.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.28 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 7.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 8.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 6.0.21 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.28 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 8.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
  x86   [C:\Program Files (x86)\dotnet]
    registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

problem:-

Caution

× Building Solution: F:\sampleDesktop\windows\sampleDesktop\sampleDesktop.vcxproj(167,5): error MSB4019: The imp...
× Build failed with message F:\sampleDesktop\windows\sampleDesktop\sampleDesktop.vcxproj(167,5): error MSB4019: The imported project > "F:\sampleDesktop\node_modules\lottie-react-native\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" was not found. Confirm that > the expression in the Import declaration "F:\sampleDesktop\node_modules\lottie-react-native\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" is correct, and that the file exists on disk.. Check your build configuration.
Command failed. Re-run the command with --logging for more information.

expected:-

solution should build.

repo:-

https://github.com/AkshatSoni26/windows-lottie-react-native