Windows 1709 (16299) template app is crashing when clicking a link

[tbottke]

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version: 4.13.1
2. npx react-native info:

System:
    OS: Windows 10 10.0.16299
    CPU: (6) x64 AMD Ryzen 5 PRO 4650G with Radeon Graphics
    Memory: 572.85 GB / 2.43 GB
  Binaries:
    Node: 15.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: not found
    npm: 7.4.3 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 15.9.28307.1342 (Visual Studio Community 2017), 16.8.30907.101 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_282 - C:\Program Files\OpenJDK\openjdk-8u282-b08\bin\javac.EXE
    Python: 3.9.1 - C:\Python39\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-windows: ^0.63.0-0 => 0.63.19
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. be on Windows 1709 (16299)
2. npx react-native init <projectName> --template react-native@^0.63.2
3. cd projectName
4. npx react-native-windows-init --overwrite
5. apply first fix from @asklar Fix startup crash on RS3 #6980 (KeyboardAcceleratorPlacementMode)
6. build release(x86) and click on a link in the app

Expected Results

App should not crash when clicking a link on Windows 10 1709. Also there might be more problems with this windows version I guess it needs some testing https://microsoft.github.io/react-native-windows/docs/win10-compat says that 1709 is supported.

screenshot:

[asklar]

@tbottke try this: in \Microsoft.ReactNative\Modules\Animated\FrameAnimationDriver.cpp

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

#include "pch.h"

#include "FrameAnimationDriver.h"
#include "Utils/Helpers.h"

namespace react::uwp {
FrameAnimationDriver::FrameAnimationDriver(
    int64_t id,
    int64_t animatedValueTag,
    const Callback &endCallback,
    const folly::dynamic &config,
    const std::shared_ptr<NativeAnimatedNodeManager> &manager)
    : AnimationDriver(id, animatedValueTag, endCallback, config, manager) {
  for (const auto &frame : config.find("frames").dereference().second) {
    m_frames.push_back(frame.asDouble());
  }
  m_toValue = config.find("toValue").dereference().second.asDouble();
}

std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> FrameAnimationDriver::MakeAnimation(
    const folly::dynamic & /*config*/) {
  const auto [scopedBatch, animation] = []() {
    const auto compositor = Microsoft::ReactNative::GetCompositor();
    return std::make_tuple(
        compositor.CreateScopedBatch(
            react::uwp::IsRS5OrHigher() ? comp::CompositionBatchTypes::AllAnimations
                                        : comp::CompositionBatchTypes::Animation),
        compositor.CreateScalarKeyFrameAnimation());
  }();

  // Frames contains 60 values per second of duration of the animation, convert
  // the size of frames to duration in ms.
  std::chrono::milliseconds duration(static_cast<int>(m_frames.size() * 1000.0 / 60.0));
  animation.Duration(duration);

  auto normalizedProgress = 0.0f;
  auto step = 1.0f / m_frames.size();
  auto fromValue = GetAnimatedValue()->RawValue();
  for (auto frame : m_frames) {
    normalizedProgress = std::min(normalizedProgress += step, 1.0f);
    animation.InsertKeyFrame(normalizedProgress, static_cast<float>(frame * (m_toValue - fromValue)));
  }

  if (m_iterations == -1) {
    animation.IterationBehavior(winrt::AnimationIterationBehavior::Forever);
  } else {
    animation.IterationCount(static_cast<int32_t>(m_iterations));
    animation.IterationBehavior(winrt::AnimationIterationBehavior::Count);
  }

  return std::make_tuple(animation, scopedBatch);
}

double FrameAnimationDriver::ToValue() {
  return m_toValue;
}

} // namespace react::uwp

[tbottke]

@asklar with your fix the template app is not crashing anymore but I am not able to click any link. Beside that in my own app I am using a WebView that is the next thing that is crashing: Isloaded().

Also sometimes the app crashes because of: ActualSize():

[asklar]

Hi @tbottke, for the webview one, it looks like that module is using FrameworkElement.IsLoaded which is only supported on 17763 (1803) and up.
The call to that api was added in this PR, it is not essential for general webview users so this should be fixed (by adding a version check).
Filed: react-native-webview/react-native-webview#1856

The second crash is from using UIElement.ActualSize available on 18362 (1903) and up.
This was fixed in #6172 and backported to 0.63, but you are running an older minor version of 0.63 so if you update to the latest one it should have that fix.

Unfortunately it's going to be hard to get everything to work on older OS releases unless you are using the version of the UI framework that is independent of the OS (WinUI 3 - but that only works on 1803 and up). You can check more details on how to use WinUI 3 with RNW here. Note that this support is experimental at this point and there are no community modules that currently support WinUI 3. In particular the webview module will have to be reworked to work with WebView2 (see feature request).

[tbottke]

@asklar thanks for your help! I will have a look at the mentioned links.

Edit: @asklar do you have an idea where this error is coming from?

[asklar]

@tbottke that stack just says something threw an exception (on a different thread, possibly), and it's being shuttled over to the UI thread. We'd have to have some more info on what was going on to figure out what happened. You can enable break on WinRT Originate exception in the Exceptions window in the Debug menu. More info here.

[asklar]

I've sent a PR for the webview issue too: react-native-webview/react-native-webview#1858

[tbottke]

@asklar there is a bug with older versions of Windows in FlyoutViewManager.cpp at line 179:

xaml::Input::FocusManager::TryFocusAsync(m_targetElement, winrt::FocusState::Programmatic);

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.input.focusmanager.tryfocusasync?view=winrt-19041
solution would be to check the version here once more:

          if (react::uwp::IsRS4OrHigher()) {
              xaml::Input::FocusManager::TryFocusAsync(m_targetElement, winrt::FocusState::Programmatic);
          }

[asklar]

nice find. Feel free to submit a PR :)