Merge pull request #10326 from Expensify/ionatan_onyxdev

Expose Onyx in web development

Author: puneetlath

README.md

@@ -121,6 +121,10 @@ Our React Native Android app now uses the `Hermes` JS engine which requires your
 3. You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up a debugger. If you don't see the "inspect" link, make sure the Metro server is running.
 4. You can now use the Chrome debug tools. See [React Native Debugging Hermes](https://reactnative.dev/docs/hermes#debugging-hermes-using-google-chromes-devtools)
 
+## Web
+
+To make it easier to test things in web, we expose the Onyx object to the window, so you can easily do `Onyx.set('bla', 1)`.
+
 ---
 
 # App Structure and Conventions

src/App.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import Onyx from 'react-native-onyx';
 import CustomStatusBar from './components/CustomStatusBar';
 import ErrorBoundary from './components/ErrorBoundary';
 import Expensify from './Expensify';
@@ -11,6 +12,12 @@ import OnyxProvider from './components/OnyxProvider';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import ComposeProviders from './components/ComposeProviders';
 import SafeArea from './components/SafeArea';
+import * as Environment from './libs/Environment/Environment';
+
+// For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
+if (window && Environment.isDevelopment()) {
+    window.Onyx = Onyx;
+}
 
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,