Refactor Android/iOS/C++ TurboModule examples in RNTester/Catalyst

Summary:
## Changelog:

[Internal] - Refactor Android/iOS/C++ TurboModule examples

~~This makes sure that both native and pure C++ (NativeCxx) TurboModule examples could be run from the Catalyst app.~~

EDIT: See the discussion - this removes the `Playground (NativeModules)` app from Catalyst, as it's already available from the `RNTester Browser` and doesn't provide the C++ counterpart.

Also, there are some tweaks and code factoring in styles, to make it all fit on the screen nicely.

Reviewed By: javache

Differential Revision: D43605250

fbshipit-source-id: 44ee694660f3ad524b8362149ebe617ee495225e

packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js

@@ -12,11 +12,9 @@ import type {RootTag} from 'react-native/Libraries/ReactNative/RootTag';
 
 import {
   DeviceEventEmitter,
-  StyleSheet,
   Text,
   View,
   FlatList,
-  Platform,
   TouchableOpacity,
   RootTagContext,
 } from 'react-native';
@@ -26,6 +24,8 @@ import NativeCxxModuleExample, {
   EnumNone,
 } from '../../../NativeCxxModuleExample/NativeCxxModuleExample';
 
+import styles from './TurboModuleExampleCommon';
+
 type State = {|
   testResults: {
     [string]: {
@@ -55,7 +55,7 @@ type Examples =
   | 'promise'
   | 'rejectPromise'
   | 'voidFunc'
-  | 'emitCustomDeviceEvent';
+  | 'emitDeviceEvent';
 
 class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
   static contextType: React$Context<RootTag> = RootTagContext;
@@ -99,12 +99,12 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
         .then(() => {})
         .catch(e => this._setResult('rejectPromise', e.message)),
     voidFunc: () => NativeCxxModuleExample?.voidFunc(),
-    emitCustomDeviceEvent: () => {
+    emitDeviceEvent: () => {
       const CUSTOM_EVENT_TYPE = 'myCustomDeviceEvent';
       DeviceEventEmitter.removeAllListeners(CUSTOM_EVENT_TYPE);
       DeviceEventEmitter.addListener(CUSTOM_EVENT_TYPE, (...args) => {
         this._setResult(
-          'emitCustomDeviceEvent',
+          'emitDeviceEvent',
           `${CUSTOM_EVENT_TYPE}(${args.map(s => `${s}`).join(', ')})`,
         );
       });
@@ -197,46 +197,4 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  item: {
-    flexDirection: 'row',
-    margin: 6,
-  },
-  column: {
-    flex: 2,
-    justifyContent: 'center',
-    padding: 3,
-  },
-  result: {
-    alignItems: 'stretch',
-    justifyContent: 'space-between',
-  },
-  value: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-    fontSize: 12,
-  },
-  type: {
-    color: '#333',
-    fontSize: 10,
-  },
-  button: {
-    borderColor: '#444',
-    padding: 3,
-    flex: 1,
-  },
-  buttonTextLarge: {
-    textAlign: 'center',
-    color: 'rgb(0,122,255)',
-    fontSize: 16,
-    padding: 6,
-  },
-  buttonText: {
-    color: 'rgb(0,122,255)',
-    textAlign: 'center',
-  },
-});
-
 module.exports = NativeCxxModuleExampleExample;

packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js

@@ -12,14 +12,15 @@ import NativeSampleTurboModule from 'react-native/Libraries/TurboModule/samples/
 import {EnumInt} from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
 import type {RootTag} from 'react-native/Libraries/ReactNative/RootTag';
 import {
-  StyleSheet,
   Text,
   View,
   FlatList,
   Platform,
   TouchableOpacity,
   RootTagContext,
 } from 'react-native';
+
+import styles from './TurboModuleExampleCommon';
 import * as React from 'react';
 
 type State = {|
@@ -183,46 +184,4 @@ class SampleTurboModuleExample extends React.Component<{||}, State> {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  item: {
-    flexDirection: 'row',
-    margin: 6,
-  },
-  column: {
-    flex: 2,
-    justifyContent: 'center',
-    padding: 3,
-  },
-  result: {
-    alignItems: 'stretch',
-    justifyContent: 'space-between',
-  },
-  value: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-    fontSize: 12,
-  },
-  type: {
-    color: '#333',
-    fontSize: 10,
-  },
-  button: {
-    borderColor: '#444',
-    padding: 3,
-    flex: 1,
-  },
-  buttonTextLarge: {
-    textAlign: 'center',
-    color: 'rgb(0,122,255)',
-    fontSize: 16,
-    padding: 6,
-  },
-  buttonText: {
-    color: 'rgb(0,122,255)',
-    textAlign: 'center',
-  },
-});
-
 module.exports = SampleTurboModuleExample;

packages/rn-tester/js/examples/TurboModule/TurboModuleExampleCommon.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import {Platform, StyleSheet} from 'react-native';
+
+// $FlowFixMe[value-as-type]
+const styles: StyleSheet = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {
+    flexDirection: 'row',
+    margin: 2,
+  },
+  column: {
+    flex: 2,
+    justifyContent: 'center',
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  result: {
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
+  },
+  value: {
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontSize: 10,
+  },
+  type: {
+    color: '#333',
+    fontSize: 8,
+  },
+  button: {
+    borderColor: '#444',
+    padding: 3,
+    flex: 1,
+  },
+  buttonTextLarge: {
+    textAlign: 'center',
+    color: 'rgb(0,122,255)',
+    fontSize: 16,
+    padding: 6,
+  },
+  buttonText: {
+    color: 'rgb(0,122,255)',
+    textAlign: 'center',
+    fontSize: 12,
+  },
+});
+
+export default styles;