Update layoutDirection in calls to ReactNativeIsland::Arrange

[Yajur-Grover]

Description

In Main.cpp, currently the call to ReactNativeIsland::Arrange() is being passed an 'undefined' layoutDirection. This change modifies the constraints object so that the layoutDirection is not undefined.

When trying to launch an example fabric app in this async-storage branch, I got the following error:

This change resolves this issue so that layoutDirection is never set to Undefined.

Platforms affected

• Android
• iOS
• macOS
• visionOS
• Windows

Test plan

I initially tried following the below test plan, which I got from the PR adding New Architecture:

npm run set-react-version canary-windows
yarn
cd example
yarn install-windows-test-app --use-fabric
yarn windows

# In a separate terminal
yarn start

However, yarn windows would give me the following error:

"C:\new-account-repos\react-native-test-app\example\windows\Example.sln" (Restore target) (1) ->
(_FilterRestoreGraphProjectInputItems target) ->
  C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\CommonExtensions\Microsoft\NuGet\NuGet.targets(4
65,5): error MSB3202: The project file "C:\new-account-repos\react-native-test-app\example\Folly\Folly.vcxproj" was not
 found. [C:\new-account-repos\react-native-test-app\example\windows\Example.sln]
  C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\CommonExtensions\Microsoft\NuGet\NuGet.targets(4
65,5): error MSB3202: The project file "C:\new-account-repos\react-native-test-app\example\fmt\fmt.vcxproj" was not fou
nd. [C:\new-account-repos\react-native-test-app\example\windows\Example.sln]
  C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\CommonExtensions\Microsoft\NuGet\NuGet.targets(4
65,5): error MSB3202: The project file "C:\new-account-repos\react-native-test-app\example\Microsoft.ReactNative\Micros
oft.ReactNative.vcxproj" was not found. [C:\new-account-repos\react-native-test-app\example\windows\Example.sln]
  C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\CommonExtensions\Microsoft\NuGet\NuGet.targets(4
65,5): error MSB3202: The project file "C:\new-account-repos\react-native-test-app\example\Common\Common.vcxproj" was n
ot found. [C:\new-account-repos\react-native-test-app\example\windows\Example.sln]

Looking at the generated solution file Example.sln, the paths for several of the Project declarations were incorrect - e.g Microsoft.ReactNative had the path ..\\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj whereas the correct path is ..\\..\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj. After fixing all the instances of this path issue in Example.sln, the app was able to launch successfully.

[tido64]

Can you check out #2249 and see if it fixes the paths in the solution file?

[Yajur-Grover]

Can you check out #2249 and see if it fixes the paths in the solution file?

That change resolved the issues with the paths in the solution file.

[Yajur-Grover]

@tido64 I ended up removing the web storage module which resolved the codegen-windows issues, and I can build the app successfully when running the app through Visual Studio:

However, when running yarn windows in example, I get the following error on the command line:

√ Found Solution: C:\new-account-repos\react-native-test-app\example\windows\Example.sln
i Build configuration: Debug
i Build platform: x64
× Building Solution: Package.appxmanifest : error APPX0703: Manifest references file 'Microsoft.ReactNative.dll'...
× Build failed with message 8:6>Package.appxmanifest : error APPX0703: Manifest references file 'Microsoft.ReactNative.dll' which is not part of the payload. [C:\new-account-repos\react-native-test-app\example\node_modules\.generated\windows\Win32\ReactApp.Package.wapproj]. Check your build configuration.
Command failed. Re-run the command with --logging for more information.

This appears to be the same error that you got in the comment here. Was wondering if you could repro the same on your end.

[tido64]

Can you revert these changes?

[tido64]

This is really odd. I looked at react-native-windows and cannot see LayoutDirection being set at all: https://github.com/search?q=repo%3Amicrosoft%2Freact-native-windows+UpdateRootViewSizeToAppWindow&type=code

How does this work upstream? I'm not sure hard-coding left-to-right is the correct thing to do here.

[tido64]

@acoates-ms: What's the right fix here? It looks like the playground app hard-codes it to winrt::LayoutDirection::LeftToRight, but should it be read from somewhere?

[Yajur-Grover]

@tido64 closing this for now as this PR fixes the logic in RNW when passing in undefined for layoutDirection.