Skip to content

Commit b6ed317

Browse files
christophpurrermeta-codesync[bot]
authored andcommitted
Align SampleTurboModuleExample UI with NativeCxxModuleExampleExample (#57985)
Summary: Pull Request resolved: #57985 The two RNTester TurboModule example screens had drifted apart, making it hard to compare TurboModule and C++ TurboModule behaviour side by side. Align `SampleTurboModuleExample` with the style already used by `NativeCxxModuleExampleExample`: - Order and group the entries in `_tests` the same way (callback, ArrayBuffer group, `get*` group, promises, `voidFunc`), so the buttons render in the same order on both screens. - Make the `Examples` union match the tests that actually exist; it still listed many entries copied from the C++ example that `SampleTurboModule` does not implement (`getCustomHostObject`, `getSet`, `setMenuItem`, ...) and was missing `getEnum`, `getRootTag` and `getUnsafeObject`. - Add the missing `installJSIBindings` entry to `ErrorExamples` and type `_renderResult` as `Examples | ErrorExamples`. - Surface rejected promises from the error tests in the UI instead of only logging them to the console, matching the other screen. - Fix `getUnsafeObject` to call `getUnsafeObject` instead of `getObject`. - Merge the duplicated `NativeSampleTurboModule` imports and drop a stale Flow suppression. Changelog: [Internal] Differential Revision: D116375214
1 parent cdc44bc commit b6ed317

1 file changed

Lines changed: 39 additions & 51 deletions

File tree

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

Lines changed: 39 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ import RNTesterText from '../../components/RNTesterText';
1414
import styles from './TurboModuleExampleCommon';
1515
import * as React from 'react';
1616
import {FlatList, RootTagContext, TouchableOpacity, View} from 'react-native';
17-
import NativeSampleTurboModule from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
18-
import {EnumInt} from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
17+
import NativeSampleTurboModule, {
18+
EnumInt,
19+
} from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
1920

2021
type State = {
2122
testResults: {
@@ -33,6 +34,7 @@ type Examples =
3334
| 'getArray'
3435
| 'getBool'
3536
| 'getConstants'
37+
| 'getEnum'
3638
| 'getCustomEnum'
3739
| 'getCustomHostObject'
3840
| 'getBinaryTreeNode'
@@ -42,9 +44,11 @@ type Examples =
4244
| 'getMap'
4345
| 'getNumber'
4446
| 'getObject'
47+
| 'getRootTag'
4548
| 'getSet'
4649
| 'getString'
4750
| 'getUnion'
51+
| 'getUnsafeObject'
4852
| 'getValue'
4953
| 'getArrayBuffer'
5054
| 'createNativeBuffer'
@@ -63,7 +67,8 @@ type ErrorExamples =
6367
| 'promiseThrows'
6468
| 'voidFuncAssert'
6569
| 'getObjectAssert'
66-
| 'promiseAssert';
70+
| 'promiseAssert'
71+
| 'installJSIBindings';
6772

6873
class SampleTurboModuleExample extends React.Component<{}, State> {
6974
static contextType: React.Context<RootTag> = RootTagContext;
@@ -80,38 +85,12 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
8085
NativeSampleTurboModule.getValueWithCallback(callbackValue =>
8186
this._setResult('callback', callbackValue),
8287
),
83-
promise: () =>
84-
NativeSampleTurboModule.getValueWithPromise(false).then(valuePromise =>
85-
this._setResult('promise', valuePromise),
86-
),
87-
rejectPromise: () =>
88-
NativeSampleTurboModule.getValueWithPromise(true)
89-
.then(() => {})
90-
.catch(e => {
91-
this._setResult('rejectPromise', e.message);
92-
}),
93-
getConstants: () => NativeSampleTurboModule.getConstants(),
94-
voidFunc: () => NativeSampleTurboModule.voidFunc(),
95-
getBool: () => NativeSampleTurboModule.getBool(true),
96-
getEnum: () =>
97-
NativeSampleTurboModule.getEnum
98-
? NativeSampleTurboModule.getEnum(EnumInt.A)
99-
: null,
100-
getNumber: () => NativeSampleTurboModule.getNumber(99.95),
101-
getString: () => NativeSampleTurboModule.getString('Hello'),
10288
getArray: () =>
10389
NativeSampleTurboModule.getArray([
10490
{a: 1, b: 'foo'},
10591
{a: 2, b: 'bar'},
10692
null,
10793
]),
108-
getObject: () =>
109-
NativeSampleTurboModule.getObject({a: 1, b: 'foo', c: null}),
110-
getUnsafeObject: () =>
111-
NativeSampleTurboModule.getObject({a: 1, b: 'foo', c: null}),
112-
getRootTag: () => NativeSampleTurboModule.getRootTag(this.context),
113-
getValue: () =>
114-
NativeSampleTurboModule.getValue(5, 'test', {a: 1, b: 'foo'}),
11594
getArrayBuffer: () => {
11695
const input = new Uint8Array([1, 2, 3, 4]);
11796
const result = NativeSampleTurboModule.getArrayBuffer(input.buffer);
@@ -135,6 +114,30 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
135114
NativeSampleTurboModule.getAsyncBuffer(4).then(buffer =>
136115
this._setResult('getAsyncBuffer', Array.from(new Uint8Array(buffer))),
137116
),
117+
getBool: () => NativeSampleTurboModule.getBool(true),
118+
getConstants: () => NativeSampleTurboModule.getConstants(),
119+
getEnum: () =>
120+
NativeSampleTurboModule.getEnum
121+
? NativeSampleTurboModule.getEnum(EnumInt.A)
122+
: null,
123+
getNumber: () => NativeSampleTurboModule.getNumber(99.95),
124+
getObject: () =>
125+
NativeSampleTurboModule.getObject({a: 1, b: 'foo', c: null}),
126+
getRootTag: () => NativeSampleTurboModule.getRootTag(this.context),
127+
getString: () => NativeSampleTurboModule.getString('Hello'),
128+
getUnsafeObject: () =>
129+
NativeSampleTurboModule.getUnsafeObject({a: 1, b: 'foo', c: null}),
130+
getValue: () =>
131+
NativeSampleTurboModule.getValue(5, 'test', {a: 1, b: 'foo'}),
132+
promise: () =>
133+
NativeSampleTurboModule.getValueWithPromise(false).then(valuePromise =>
134+
this._setResult('promise', valuePromise),
135+
),
136+
rejectPromise: () =>
137+
NativeSampleTurboModule.getValueWithPromise(true)
138+
.then(() => {})
139+
.catch(e => this._setResult('rejectPromise', e.message)),
140+
voidFunc: () => NativeSampleTurboModule.voidFunc(),
138141
};
139142

140143
// $FlowFixMe[missing-local-annot]
@@ -143,51 +146,39 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
143146
try {
144147
NativeSampleTurboModule.voidFuncThrows?.();
145148
} catch (e) {
146-
console.error(e);
147149
return e.message;
148150
}
149151
},
150152
getObjectThrows: () => {
151153
try {
152154
NativeSampleTurboModule.getObjectThrows?.({a: 1, b: 'foo', c: null});
153155
} catch (e) {
154-
console.error(e);
155156
return e.message;
156157
}
157158
},
158-
promiseThrows: () => {
159+
promiseThrows: () =>
159160
NativeSampleTurboModule.promiseThrows?.()
160161
.then(() => {})
161-
.catch(e => {
162-
console.error(e);
163-
});
164-
},
162+
.catch(e => this._setResult('promiseThrows', e.message)),
165163
voidFuncAssert: () => {
166164
try {
167165
NativeSampleTurboModule.voidFuncAssert?.();
168166
} catch (e) {
169-
console.error(e);
170167
return e.message;
171168
}
172169
},
173170
getObjectAssert: () => {
174171
try {
175172
NativeSampleTurboModule.getObjectAssert?.({a: 1, b: 'foo', c: null});
176173
} catch (e) {
177-
console.error(e);
178174
return e.message;
179175
}
180176
},
181-
promiseAssert: () => {
177+
promiseAssert: () =>
182178
NativeSampleTurboModule.promiseAssert?.()
183179
.then(() => {})
184-
.catch(e => {
185-
console.error(e);
186-
});
187-
},
188-
installJSIBindings: () => {
189-
return global.__SampleTurboModuleJSIBindings;
190-
},
180+
.catch(e => this._setResult('promiseAssert', e.message)),
181+
installJSIBindings: () => global.__SampleTurboModuleJSIBindings,
191182
};
192183

193184
_setResult(
@@ -204,9 +195,6 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
204195
| Array<$FlowFixMe>,
205196
) {
206197
this.setState(({testResults}) => ({
207-
/* $FlowFixMe[cannot-spread-indexer] (>=0.122.0 site=react_native_fb)
208-
* This comment suppresses an error found when Flow v0.122.0 was
209-
* deployed. To see the error, delete this comment and run Flow. */
210198
testResults: {
211199
...testResults,
212200
/* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)
@@ -217,7 +205,7 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
217205
}));
218206
}
219207

220-
_renderResult(name: string): React.Node {
208+
_renderResult(name: Examples | ErrorExamples): React.Node {
221209
const result = this.state.testResults[name] || {};
222210
return (
223211
<View style={styles.result}>
@@ -282,7 +270,7 @@ class SampleTurboModuleExample extends React.Component<{}, State> {
282270
)
283271
}>
284272
<RNTesterText style={styles.buttonTextLarge}>
285-
Run all tests
273+
Run function call tests
286274
</RNTesterText>
287275
</TouchableOpacity>
288276
<TouchableOpacity

0 commit comments

Comments
 (0)