this repo has no description
Patch out `PerformanceMonitor` component (#9266)
* patch out perf monitor component
* make PerformanceMonitor a noop
* rm debug stuff
authored by
Samuel Newman
and committed by
GitHub
e28aa7d1
d4d5d6d8
+389
+389
patches/react-native-reanimated+3.19.1.patch
+389
patches/react-native-reanimated+3.19.1.patch
···
1
+
diff --git a/node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js b/node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js
2
+
index 9c98d6c..70ada9f 100644
3
+
--- a/node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js
4
+
+++ b/node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js
5
+
@@ -1,125 +1,5 @@
6
+
'use strict';
7
+
8
+
-import React, { useEffect, useRef } from 'react';
9
+
-import { StyleSheet, TextInput, View } from 'react-native';
10
+
-import { addWhitelistedNativeProps } from "../ConfigHelper.js";
11
+
-import { createAnimatedComponent } from "../createAnimatedComponent/index.js";
12
+
-import { useAnimatedProps, useFrameCallback, useSharedValue } from "../hook/index.js";
13
+
-function createCircularDoublesBuffer(size) {
14
+
- 'worklet';
15
+
-
16
+
- return {
17
+
- next: 0,
18
+
- buffer: new Float32Array(size),
19
+
- size,
20
+
- count: 0,
21
+
- push(value) {
22
+
- const oldValue = this.buffer[this.next];
23
+
- const oldCount = this.count;
24
+
- this.buffer[this.next] = value;
25
+
- this.next = (this.next + 1) % this.size;
26
+
- this.count = Math.min(this.size, this.count + 1);
27
+
- return oldCount === this.size ? oldValue : null;
28
+
- },
29
+
- front() {
30
+
- const notEmpty = this.count > 0;
31
+
- if (notEmpty) {
32
+
- const current = this.next - 1;
33
+
- const index = current < 0 ? this.size - 1 : current;
34
+
- return this.buffer[index];
35
+
- }
36
+
- return null;
37
+
- },
38
+
- back() {
39
+
- const notEmpty = this.count > 0;
40
+
- return notEmpty ? this.buffer[this.next] : null;
41
+
- }
42
+
- };
43
+
-}
44
+
-const DEFAULT_BUFFER_SIZE = 20;
45
+
-addWhitelistedNativeProps({
46
+
- text: true
47
+
-});
48
+
-const AnimatedTextInput = createAnimatedComponent(TextInput);
49
+
-function loopAnimationFrame(fn) {
50
+
- let lastTime = 0;
51
+
- function loop() {
52
+
- requestAnimationFrame(time => {
53
+
- if (lastTime > 0) {
54
+
- fn(lastTime, time);
55
+
- }
56
+
- lastTime = time;
57
+
- requestAnimationFrame(loop);
58
+
- });
59
+
- }
60
+
- loop();
61
+
-}
62
+
-function getFps(renderTimeInMs) {
63
+
- 'worklet';
64
+
-
65
+
- return 1000 / renderTimeInMs;
66
+
-}
67
+
-function completeBufferRoutine(buffer, timestamp) {
68
+
- 'worklet';
69
+
-
70
+
- timestamp = Math.round(timestamp);
71
+
- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;
72
+
- const measuredRangeDuration = timestamp - droppedTimestamp;
73
+
- return getFps(measuredRangeDuration / buffer.count);
74
+
-}
75
+
-function JsPerformance({
76
+
- smoothingFrames
77
+
-}) {
78
+
- const jsFps = useSharedValue(null);
79
+
- const totalRenderTime = useSharedValue(0);
80
+
- const circularBuffer = useRef(createCircularDoublesBuffer(smoothingFrames));
81
+
- useEffect(() => {
82
+
- loopAnimationFrame((_, timestamp) => {
83
+
- timestamp = Math.round(timestamp);
84
+
- const currentFps = completeBufferRoutine(circularBuffer.current, timestamp);
85
+
-
86
+
- // JS fps have to be measured every 2nd frame,
87
+
- // thus 2x multiplication has to occur here
88
+
- jsFps.value = (currentFps * 2).toFixed(0);
89
+
- });
90
+
- }, [jsFps, totalRenderTime]);
91
+
- const animatedProps = useAnimatedProps(() => {
92
+
- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';
93
+
- return {
94
+
- text,
95
+
- defaultValue: text
96
+
- };
97
+
- });
98
+
- return <View style={styles.container}>
99
+
- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />
100
+
- </View>;
101
+
-}
102
+
-function UiPerformance({
103
+
- smoothingFrames
104
+
-}) {
105
+
- const uiFps = useSharedValue(null);
106
+
- const circularBuffer = useSharedValue(null);
107
+
- useFrameCallback(({
108
+
- timestamp
109
+
- }) => {
110
+
- if (circularBuffer.value === null) {
111
+
- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);
112
+
- }
113
+
- timestamp = Math.round(timestamp);
114
+
- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);
115
+
- uiFps.value = currentFps.toFixed(0);
116
+
- });
117
+
- const animatedProps = useAnimatedProps(() => {
118
+
- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';
119
+
- return {
120
+
- text,
121
+
- defaultValue: text
122
+
- };
123
+
- });
124
+
- return <View style={styles.container}>
125
+
- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />
126
+
- </View>;
127
+
-}
128
+
/**
129
+
* A component that lets you measure fps values on JS and UI threads on both the
130
+
* Paper and Fabric architectures.
131
+
@@ -127,38 +7,7 @@ function UiPerformance({
132
+
* @param smoothingFrames - Determines amount of saved frames which will be used
133
+
* for fps value smoothing.
134
+
*/
135
+
-export function PerformanceMonitor({
136
+
- smoothingFrames = DEFAULT_BUFFER_SIZE
137
+
-}) {
138
+
- return <View style={styles.monitor}>
139
+
- <JsPerformance smoothingFrames={smoothingFrames} />
140
+
- <UiPerformance smoothingFrames={smoothingFrames} />
141
+
- </View>;
142
+
+export function PerformanceMonitor() {
143
+
+ return null;
144
+
}
145
+
-const styles = StyleSheet.create({
146
+
- monitor: {
147
+
- flexDirection: 'row',
148
+
- position: 'absolute',
149
+
- backgroundColor: '#0006',
150
+
- zIndex: 1000
151
+
- },
152
+
- header: {
153
+
- fontSize: 14,
154
+
- color: '#ffff',
155
+
- paddingHorizontal: 5
156
+
- },
157
+
- text: {
158
+
- fontSize: 13,
159
+
- fontVariant: ['tabular-nums'],
160
+
- color: '#ffff',
161
+
- fontFamily: 'monospace',
162
+
- paddingHorizontal: 3
163
+
- },
164
+
- container: {
165
+
- alignItems: 'center',
166
+
- justifyContent: 'center',
167
+
- flexDirection: 'row',
168
+
- flexWrap: 'wrap'
169
+
- }
170
+
-});
171
+
//# sourceMappingURL=PerformanceMonitor.js.map
172
+
diff --git a/node_modules/react-native-reanimated/src/component/PerformanceMonitor.tsx b/node_modules/react-native-reanimated/src/component/PerformanceMonitor.tsx
173
+
index ff8fc8a..34dde79 100644
174
+
--- a/node_modules/react-native-reanimated/src/component/PerformanceMonitor.tsx
175
+
+++ b/node_modules/react-native-reanimated/src/component/PerformanceMonitor.tsx
176
+
@@ -1,170 +1,5 @@
177
+
'use strict';
178
+
179
+
-import React, { useEffect, useRef } from 'react';
180
+
-import { StyleSheet, TextInput, View } from 'react-native';
181
+
-
182
+
-import { addWhitelistedNativeProps } from '../ConfigHelper';
183
+
-import { createAnimatedComponent } from '../createAnimatedComponent';
184
+
-import type { FrameInfo } from '../frameCallback';
185
+
-import { useAnimatedProps, useFrameCallback, useSharedValue } from '../hook';
186
+
-
187
+
-type CircularBuffer = ReturnType<typeof createCircularDoublesBuffer>;
188
+
-function createCircularDoublesBuffer(size: number) {
189
+
- 'worklet';
190
+
-
191
+
- return {
192
+
- next: 0 as number,
193
+
- buffer: new Float32Array(size),
194
+
- size,
195
+
- count: 0 as number,
196
+
-
197
+
- push(value: number): number | null {
198
+
- const oldValue = this.buffer[this.next];
199
+
- const oldCount = this.count;
200
+
- this.buffer[this.next] = value;
201
+
-
202
+
- this.next = (this.next + 1) % this.size;
203
+
- this.count = Math.min(this.size, this.count + 1);
204
+
- return oldCount === this.size ? oldValue : null;
205
+
- },
206
+
-
207
+
- front(): number | null {
208
+
- const notEmpty = this.count > 0;
209
+
- if (notEmpty) {
210
+
- const current = this.next - 1;
211
+
- const index = current < 0 ? this.size - 1 : current;
212
+
- return this.buffer[index];
213
+
- }
214
+
- return null;
215
+
- },
216
+
-
217
+
- back(): number | null {
218
+
- const notEmpty = this.count > 0;
219
+
- return notEmpty ? this.buffer[this.next] : null;
220
+
- },
221
+
- };
222
+
-}
223
+
-
224
+
-const DEFAULT_BUFFER_SIZE = 20;
225
+
-addWhitelistedNativeProps({ text: true });
226
+
-const AnimatedTextInput = createAnimatedComponent(TextInput);
227
+
-
228
+
-function loopAnimationFrame(fn: (lastTime: number, time: number) => void) {
229
+
- let lastTime = 0;
230
+
-
231
+
- function loop() {
232
+
- requestAnimationFrame((time) => {
233
+
- if (lastTime > 0) {
234
+
- fn(lastTime, time);
235
+
- }
236
+
- lastTime = time;
237
+
- requestAnimationFrame(loop);
238
+
- });
239
+
- }
240
+
-
241
+
- loop();
242
+
-}
243
+
-
244
+
-function getFps(renderTimeInMs: number): number {
245
+
- 'worklet';
246
+
- return 1000 / renderTimeInMs;
247
+
-}
248
+
-
249
+
-function completeBufferRoutine(
250
+
- buffer: CircularBuffer,
251
+
- timestamp: number
252
+
-): number {
253
+
- 'worklet';
254
+
- timestamp = Math.round(timestamp);
255
+
-
256
+
- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;
257
+
-
258
+
- const measuredRangeDuration = timestamp - droppedTimestamp;
259
+
-
260
+
- return getFps(measuredRangeDuration / buffer.count);
261
+
-}
262
+
-
263
+
-function JsPerformance({ smoothingFrames }: { smoothingFrames: number }) {
264
+
- const jsFps = useSharedValue<string | null>(null);
265
+
- const totalRenderTime = useSharedValue(0);
266
+
- const circularBuffer = useRef<CircularBuffer>(
267
+
- createCircularDoublesBuffer(smoothingFrames)
268
+
- );
269
+
-
270
+
- useEffect(() => {
271
+
- loopAnimationFrame((_, timestamp) => {
272
+
- timestamp = Math.round(timestamp);
273
+
-
274
+
- const currentFps = completeBufferRoutine(
275
+
- circularBuffer.current,
276
+
- timestamp
277
+
- );
278
+
-
279
+
- // JS fps have to be measured every 2nd frame,
280
+
- // thus 2x multiplication has to occur here
281
+
- jsFps.value = (currentFps * 2).toFixed(0);
282
+
- });
283
+
- }, [jsFps, totalRenderTime]);
284
+
-
285
+
- const animatedProps = useAnimatedProps(() => {
286
+
- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';
287
+
- return { text, defaultValue: text };
288
+
- });
289
+
-
290
+
- return (
291
+
- <View style={styles.container}>
292
+
- <AnimatedTextInput
293
+
- style={styles.text}
294
+
- animatedProps={animatedProps}
295
+
- editable={false}
296
+
- />
297
+
- </View>
298
+
- );
299
+
-}
300
+
-
301
+
-function UiPerformance({ smoothingFrames }: { smoothingFrames: number }) {
302
+
- const uiFps = useSharedValue<string | null>(null);
303
+
- const circularBuffer = useSharedValue<CircularBuffer | null>(null);
304
+
-
305
+
- useFrameCallback(({ timestamp }: FrameInfo) => {
306
+
- if (circularBuffer.value === null) {
307
+
- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);
308
+
- }
309
+
-
310
+
- timestamp = Math.round(timestamp);
311
+
-
312
+
- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);
313
+
-
314
+
- uiFps.value = currentFps.toFixed(0);
315
+
- });
316
+
-
317
+
- const animatedProps = useAnimatedProps(() => {
318
+
- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';
319
+
- return { text, defaultValue: text };
320
+
- });
321
+
-
322
+
- return (
323
+
- <View style={styles.container}>
324
+
- <AnimatedTextInput
325
+
- style={styles.text}
326
+
- animatedProps={animatedProps}
327
+
- editable={false}
328
+
- />
329
+
- </View>
330
+
- );
331
+
-}
332
+
-
333
+
-export type PerformanceMonitorProps = {
334
+
- /**
335
+
- * Sets amount of previous frames used for smoothing at highest expectedFps.
336
+
- *
337
+
- * Automatically scales down at lower frame rates.
338
+
- *
339
+
- * Affects jumpiness of the FPS measurements value.
340
+
- */
341
+
- smoothingFrames?: number;
342
+
-};
343
+
-
344
+
/**
345
+
* A component that lets you measure fps values on JS and UI threads on both the
346
+
* Paper and Fabric architectures.
347
+
@@ -172,40 +7,6 @@ export type PerformanceMonitorProps = {
348
+
* @param smoothingFrames - Determines amount of saved frames which will be used
349
+
* for fps value smoothing.
350
+
*/
351
+
-export function PerformanceMonitor({
352
+
- smoothingFrames = DEFAULT_BUFFER_SIZE,
353
+
-}: PerformanceMonitorProps) {
354
+
- return (
355
+
- <View style={styles.monitor}>
356
+
- <JsPerformance smoothingFrames={smoothingFrames} />
357
+
- <UiPerformance smoothingFrames={smoothingFrames} />
358
+
- </View>
359
+
- );
360
+
+export function PerformanceMonitor() {
361
+
+ return null;
362
+
}
363
+
-
364
+
-const styles = StyleSheet.create({
365
+
- monitor: {
366
+
- flexDirection: 'row',
367
+
- position: 'absolute',
368
+
- backgroundColor: '#0006',
369
+
- zIndex: 1000,
370
+
- },
371
+
- header: {
372
+
- fontSize: 14,
373
+
- color: '#ffff',
374
+
- paddingHorizontal: 5,
375
+
- },
376
+
- text: {
377
+
- fontSize: 13,
378
+
- fontVariant: ['tabular-nums'],
379
+
- color: '#ffff',
380
+
- fontFamily: 'monospace',
381
+
- paddingHorizontal: 3,
382
+
- },
383
+
- container: {
384
+
- alignItems: 'center',
385
+
- justifyContent: 'center',
386
+
- flexDirection: 'row',
387
+
- flexWrap: 'wrap',
388
+
- },
389
+
-});