feat(test app): add new RNTA-based test app

[kelset]

Describe the change

This PR introduces a new Playground app for BabylonReactNative; this one is based on react-native-test-app and that should help remove a lot of the maintenance overwork while streamline testing (even across different RN versions) and supporting all 4 platforms (ios, android, macos, windows). (if you want to see an example, compare the metro.config.js files ;) )

I gave it a fully different name to avoid caches collisions when testing things alongside each other.

Solves (partially, see above) #632 and it's related to #593

I'm saying partially because there are a few things should be done in subsequent PRs/efforts:

1. test for iOS - I didn't have the right setup (because of my CMake version) so it failed at build time
2. (optional) the CMake <= 3.24 limit should get addressed
3. (optional) a script similar to RNTA's own set-react-version should be set up in this codebase to allow for quick swap across different RN versions - the overhead of changes is quite minimal but if you want to test multiple versions on CI it's probably the easiest way. For example, here's the full patch for downgrading from 73 to 71: bump-to-71.patch (see it working down)
4. wire it up for testing on CI
5. at this point then old playground apps should be removed (once it works successfully on CI) fully
6. and then the docs should be updated to match

Documentation

Not yet, since it's a step 0. Once all the work is fully done, it should be enough to change the contributing and readme markdowns to point to this new folder and the simplified flow.

Testing

To test locally, navigate to Apps/BRNPlayground, then run npm i then npm run android (assuming that you have a physical Android device running & wired up).

Screenshots/Images

Here's a picture of it running successfully on an Android device:

And here's it running on the same device, but with 0.71 instead:

And just to prove that it builds, here's it running as macos app:

(had to disable Slider - since I don't think it has macOS support - and I assume we didn't wire up anything for the lib itself, that's the work that has been done here I'd say #593 - once this is merged that PR could be rebased and use this one to run the macOS example instead of having to add it to all playground apps)

[CedricGuillemet]

This is so great! Let me test/debug Android with Emulator on Windows and iOS.

[CedricGuillemet]

Building Android on Windows works perfectly.

• I could not have an opengl context on emulator. crash visible in the logcat
• XR doesn't work out of the box on the device
• Toggle engine view/enginescreen is fine, same of fast/full reload

[CedricGuillemet]

For iOS, I had to do a few changes

• in /Modules/@babylonjs/react-native-iosandroid/ios/CMakeLists.txt , change .../Apps/Playground/Playground/node_modules/... to .../Apps/BRNPlayground/node_modules/... in order to use BRNPlayground and not the legacy PG
• after npm post install/pod installm modify ios/BRNPlayground.xcworkspace and add this:

   <FileRef
      location = "group:../../../Modules/@babylonjs/Build/iOS/ReactNativeBabylon.xcodeproj">
   </FileRef>

I believe this file is generated by pod install. how to get these lines to be generated as well?

I've also used cmake 3.24, to eliminate any blocker (and because removing configuration_build_dir entries is tedious) and it builds/run but I get this error:

on device, app doesn't find metro and this error appears:

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

[matthargett]

error:

If you look in the node_modules directory for the app, is @babylonjs/react-native in there? Apps/BRNPlayground/node_modules/

[tido64]

I added the following to Modules/@babylonjs/react-native-iosandroid/ios/CMakeLists.txt after line 27:

if(NOT EXISTS ${REACTNATIVE_DIR})
  get_filename_component(REACTNATIVE_DIR "${CMAKE_CURRENT_LIST_DIR}/../../../../Apps/BRNPlayground/node_modules/react-native" ABSOLUTE)
endif()

This makes BabylonNative compile, but Xcode is unable to link it to the app because it the library search path is not added. I can't figure out how the other apps do it. It doesn't look like it was added manually in any case.

[kelset]

@tido64 thanks for giving it a pass, I've applied all the changes and now I can confirm that even with CMake 3.28.x the postinstall script (and so the CMake build) completes, which is a good improvement! Looks like there's still the issue with it linking, but it's great progress!

@matthargett just FYI for the bundling error @CedricGuillemet is seeing my current theory is that it has to do with local setup and missing watchman (we have an internal conversation going on in parallel about this PR)

[CedricGuillemet]

on mac
ios + CMake 3.24 : first 2 issues fixed (cmake + workspace)
android builds as well
both using cmake 3.24

'unable to resolve module' and 'no Bundle present' errors still present. Might be linked to my setup.

EDIT: Android on Windows builds and runs fine. no unresolved module issue.

[tido64]

'unable to resolve module' and 'no Bundle present' errors still present. Might be linked to my setup.

Is this on iOS device only? If so, I have a fix here: microsoft/react-native-test-app#1880

In the meantime, you can manually set the bundle URL in the dev menu.

[kelset]

updated to latest RN and RNTA to get the fix from Tommy for iOS and the CLI improvements

[CedricGuillemet]

I could build Android/iOS on the CI.
My tests are here : #642

I didn't try to make it clean and ready to review. it's more a bunch of steps to get everything building.
Before doing that, I need to fix this error:
error : This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is D:\a\BabylonReactNative\BabylonReactNative\Apps\BRNPlayground\windows\packages\Microsoft.Windows.CppWinRT.2.0.211028.7\build\native\Microsoft.Windows.CppWinRT.props.
I was hoping nuget was downloaded using these commands but it's not enough.

- name: Nuget restore
  run: nuget restore BRNPlayground.sln
  working-directory: ./Apps/BRNPlayground/windows

- name: Nuget restore
  run: MSBuild /p:Platform="x64" /p:Configuration="Release" /t:Restore /m BRNPlayground.sln
  working-directory: ./Apps/BRNPlayground/windows

Any idea?

[CedricGuillemet]

I think it's safe to merge this PR and continue the work with #642
Any objection ?