React-native-windows: Shadow Node For Tag Does Not Exist

[jpshelley]

Environment

1. react-native -v: 0.55.0
2. npm ls rnpm-plugin-windows: 0.2.8
3. npm ls react-native-windows: 0.55.0-rc.0

Then, specify:

• Target Platform: UWP

• Target Platform Version(s): UWP

• Target Device(s): Surface

• Development Operating System: Windows

• Visual Studio Version: 2017

Steps to Reproduce

Upgrading from an earlier version, 0.47.0 to the now stable 0.55.0, the following error has occurred when I click on a component:

Shadow Node for Tag Does Not Exist

However, if I dismiss the RedBox in debug mode, I am then able to click on the Component again like it is supposed to work.

Expected Behavior

No Shadow Node for Tag Does Not Exist when I click on a Component

Reproducible Demo

[jpshelley]

This only happens on my windows code and not on iOS - I will try to get a demo project together, but it deals with a FlatList and adding an item to the list. Regardless of what that item is, it could be a Text component, just touching the item causes the error. The item doesn't even need to be touchable or have an onPress listener

[jpshelley]

More detailed information - Using a ListView in place of the FlatList component fixes this problem. Its hard for me to get a reproducible demo but as I mentioned it involves:

1. FlatList Component
2. Adding an item to that FlatList
3. (Optional) We're using react-navigation as well, so that might have some implications but I don't know why it would

[rozele]

@jpshelley have you tried to repro on Android? Android and Windows share a similar UIManager architecture.

[jpshelley]

@rozele double checked and not happening on Android. I'll try to create a demo project this week sometime to help diagnose the issue.

[jpshelley]

I did more digging and the above was false - I now think its because of a custom Modal component. We've attempted something similar to https://github.com/Microsoft/react-native-windows/issues/618 in our code base to use the Modal component. As soon as that modal is dismissed, if I click in the Component that contains the FlatList or ListView it produces the crash.
If remove the modal logic it performs fine.

[jpshelley]

Sorry for the barrage of comments, but I want to make sure I'm adding additional info as I find it:

• If I add a breakpoint at DispatchEvent in TouchHandler and continue through, everything works fine with no crashes, https://github.com/Microsoft/react-native-windows/blob/master/ReactWindows/ReactNative/Touch/TouchHandler.cs#L263

This makes me think there is a threading issue with updating the shadow nodes?

[creambyemute]

I'm experiencing this as well.

Though it happens only in one single case for me:

I made a tagging component, If I add a new tag and navigate away from the view this error occurs.
Removing tags works fine.

I'll try to create a repro project

Edit: Haven't come around yet, will try this week!

Edit2: Working on repro repo now. Have to continue tomorrow as I just have a mac at home

[creambyemute]

@jpshelley @rozele So, I finally finished creating the reproduction repository: https://github.com/creambyemute/RNWindowsShadowNodeReproduction

How to reproduce:

1. Start UWP App
2. On HomeScreen click the addTag icon
3. Enter Text and submit with Enter-Key
4. Click on LaunchModal or switch tab and click on LaunchModal
5. Shadow Node for tag 'someNumber' does not exist

This didn't happen in 0.53 or 0.54 if I remember correctly.

Works fine on iOS/Android

[jayfar]

@creambyemute Thanks for the reproducable demo! I have been struggling in my React Native for WPF project with the same issue, but it was seldom and seemed random. I could never get it to happen when I wanted to dig into the problem.

Using your demo, as a quick workaround to the problem, I added a try catch around this bit of core code (found in .\node_modules\react-native-windows\ReactWindows\ReactNative.Shared\UIManager) and it seems to ignore the error without crashing.

https://github.com/Microsoft/react-native-windows/blob/6e781c4638815e987781a8cff578ce863a53ee92/ReactWindows/ReactNative.Shared/UIManager/UIImplementation.cs#L577-L578

It looks like not much progress has been made in general (releases, updates, etc) on this React Native for Windows project in a while. I wonder if this project is dying or dead? I hope not.

[creambyemute]

@jayfar I also hope not.

And great finding, thx!

[msftbot[bot]]

We are not investing in new features or lower priority bug fixes on vCurrent. The bulk of investment is now in vNext as we prepare to make that the default choice. If this issue is still relevant on the vNext implementation please open a vNext issue. If this issue is of significant severity for a vCurrent app and vNext is not an option, re-open with justification.