New arch: pointer events & cursors

[austinhallock]

Hey folks! I've been working migrating our app to the new architecture. One thing I haven't been able to figure out yet is a replacement for pointer events & setting cursors.

Forewarning - I'm still very new to C++ / Windows app development.

In the old architecture I was able to listen for pointer events, set cursor, etc... on CoreWindow. What's the best approach to listen to global/window-wide events like pointermove, pointerexit, etc... in the new architecture? Same question for setting cursor.

In experimenting, I've been able to subclass the AppWindow's hwnd and use SetCursor / listen for pointer event messages - that all technically works, but it only seems to apply to the non-client area (the very outer frame and titlebar). Anything in the React Native area itself doesn't seem to trigger any messages. I also tried for the child windows of DesktopClientBridge and InputSiteWindowClass, but I didn't see many events for those. I can get WM_INPUT messages, but that seems less ideal for detecting movement and enter/exit within a window.

Is there an approach that'd work better for this? Do I need get the RootComponentView? If so, is there a way to do that in a module w/o any UI?

There are some commented out interfaces in https://github.com/microsoft/react-native-windows/blob/90b34bef95d2b9dda2d839a3b6ec8f6bd8951e63/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.idl that might let me listen to pointer events, set the cursor, etc... (including ReactNativeIsland, if the entirety of RNW exists as an island?)

I know y'all are still working on documentation - just trying to see if I can get a head start since the new arch is already such a huge improvement - seems significantly faster and way less restricted than UWP.

[chrisglein]

In the new architecture we make use of WinAppSDK's content islands for hosting and input handling, so you'll need to do the listening there. CompositionEventHandler::Initialize. Example of internally where we listen to the input, if that helps:

react-native-windows/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

Line 149 in b051774

auto pointerSource = winrt::Microsoft::UI::Input::InputPointerSource::GetForIsland(island);

That help?

[acoates-ms]

To be clear, you can get the ContentIsland from ReactNativeIsland.Island()

Then you can do things like what is in the code linked above, to get direct access to pointer/keyboard input.

[austinhallock]

Thank you, this is helpful, but I still can't figure out how to get the main ReactNativeIsland for the overall app. To detect, for example, when the pointer leaves the app. In other words I'm not sure how to get the ReactNativeIsland part of ReactNativeIsland.Island()

I could grab the island from reactNativeWin32App if that API was public

react-native-windows/vnext/templates/cpp-app/windows/MyApp/MyApp.cpp

Line 34 in 2d6e2d5

auto reactNativeWin32App{winrt::Microsoft::ReactNative::ReactNativeAppBuilder().Build()};

react-native-windows/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.idl

Line 25 in 2d6e2d5

// ReactNativeIsland ReactNativeIsland {get;};

It's very possible I'm just being dumb though :)