diff --git a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js index eb40bb78b85..85b0e65bb73 100644 --- a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js +++ b/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 = 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; diff --git a/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js b/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js index 5f66e5bf9da..0043c3fe473 100644 --- a/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js +++ b/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js @@ -12,7 +12,6 @@ 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, @@ -20,6 +19,8 @@ import { 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; diff --git a/packages/rn-tester/js/examples/TurboModule/TurboModuleExampleCommon.js b/packages/rn-tester/js/examples/TurboModule/TurboModuleExampleCommon.js new file mode 100644 index 00000000000..a62a56cdfd6 --- /dev/null +++ b/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;