DEMO: test the battery status WebAPI across web and iOS&Android

[kelset]

Hello, and welcome to the demo!

If you are reading this, it's very likely that you watched @kelset and @tido64's demo at RNEU 2023 (link to recording TBA).

This draft PR is here to provide you with step-by-step instructions for how to play with it locally!

Please bear in mind that this example is just to showcase what we are thinking about when dabbling with the concept of having web code work directly in React Native. It is NOT for production use - heck, it's not for ANY use aside from this demo scenario!

Relevant context

If you want to better understand what's going on here, please check out our Roadmap document and the webapis RFC; after that, you can have a pass through the code of this PR adding a custom polyfills "autolinker" for Metro and the PR that implements the webapi for BatteryStatus for iOS and Android.

Steps to setup locally

1. git clone the repository
2. checkout this branch kelset/rneu-demo-v2
3. run yarn install at root
4. navigate into the test app folder cd packages/test-app
5. run yarn build --dependencies to prepare the monorepo
6. run pod install --project-directory=ios to setup the iOS test app
7. now you can go into the subfolder web (via cd web) and once again run yarn install to link everything up
8. now, from the web subfolder, you should be able to run yarn dev and you can open up the Vite+React+TS sample app at http://localhost:5173/
9. now you can open a new terminal window, go to the packages/test-app folder, and we can start the native apps
10. first off, let's run the iOS one yarn ios --simulator "iPhone 14"
11. while this is building, let's open a third terminal window on the packages/test-app folder and run yarn start --reset-cache to start Metro
12. now, going back to the second terminal window, the iOS process should have finished so you can start the Android one with yarn android
13. at this point, everything should be up and running and you can start playing around with the code. The first file you should play with is packages/test-app/src/App.native.tsx; go there and uncomment lines L19, L27 and L39->L41, then hit save.
14. you can now play around with packages/test-app/web/src/useBatteryStatus.ts (ex. changing L8 to setBatteryLevel(status.level * 100); ) and when hitting save you should see all the 3 apps refresh and showcase the new values!
15. If you did everything right, you should end up with something similar to this:

Remember that the iOS simulator will always show -1/-100, and that you can play with the Android Emulator settings to change the value (like I did in the screenshot, to 65%)

And that's it! Have fun and please remember this is just an experiment 🧪