Skip to content

Commit

Permalink
Refactor Android/iOS/C++ TurboModule examples in RNTester/Catalyst
Browse files Browse the repository at this point in the history
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
  • Loading branch information
rshest authored and facebook-github-bot committed Feb 28, 2023
1 parent c18566f commit 95e20ed
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 90 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,6 +24,8 @@ import NativeCxxModuleExample, {
EnumNone,
} from '../../../NativeCxxModuleExample/NativeCxxModuleExample';

import styles from './TurboModuleExampleCommon';

type State = {|
testResults: {
[string]: {
Expand Down Expand Up @@ -55,7 +55,7 @@ type Examples =
| 'promise'
| 'rejectPromise'
| 'voidFunc'
| 'emitCustomDeviceEvent';
| 'emitDeviceEvent';

class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
static contextType: React$Context<RootTag> = RootTagContext;
Expand Down Expand Up @@ -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(', ')})`,
);
});
Expand Down Expand Up @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {|
Expand Down Expand Up @@ -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;
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 95e20ed

Please sign in to comment.