Add many pointers example

Summary: Changelog: [Internal] - Add a display example for offset of many pointers

Reviewed By: mdvacca

Differential Revision: D39736111

fbshipit-source-id: 1fb3f1037d7e743ae1a383a4f4ee876e32da4a6a

packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js

@@ -0,0 +1,63 @@
+/**
+ * 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
+ */
+
+import * as React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import type {RNTesterModuleExample} from '../../../types/RNTesterTypes';
+import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+
+const styles = StyleSheet.create({
+  container: {height: '30%', width: '100%', backgroundColor: 'black'},
+  properties: {},
+  property: {borderWidth: 1, margin: 10},
+});
+
+function ManyPointersPropertiesExample(): React.Node {
+  const [data, setData] = React.useState({});
+  const onPointerMove = (event: PointerEvent) => {
+    const pointerId = event.nativeEvent.pointerId;
+    setData({...data, [pointerId]: event.nativeEvent});
+  };
+
+  return (
+    <>
+      <View style={styles.container} onPointerMove={onPointerMove} />
+      <View style={styles.properties}>
+        {Object.entries(data).map(
+          //$FlowFixMe can't supply generic for Object.entries
+          ([key, evt]: [string, PointerEvent['nativeEvent']]) => (
+            <View style={styles.property} key={key}>
+              <Text>PointerID: {evt.pointerId}</Text>
+              <Text>
+                Offset: [{evt.offsetX.toPrecision(3)},{' '}
+                {evt.offsetY.toPrecision(3)}]
+              </Text>
+              <Text>
+                Coordinates: [{evt.clientX.toPrecision(3)},{' '}
+                {evt.clientY.toPrecision(3)}]
+              </Text>
+              <Text>Button: {evt.button}</Text>
+              <Text>Pressure: {evt.pressure}</Text>
+            </View>
+          ),
+        )}
+      </View>
+    </>
+  );
+}
+
+export default ({
+  name: 'many_pointers_properties_example',
+  description: 'Display of properties for multiple pointers',
+  title: 'Display Properties of many pointers',
+  render(): React.Node {
+    return <ManyPointersPropertiesExample />;
+  },
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js

@@ -22,6 +22,7 @@ import PointerEventPointerMoveAcross from './W3CPointerEventPlatformTests/Pointe
 import PointerEventPointerMoveEventOrder from './W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder';
 import PointerEventPointerMoveBetween from './W3CPointerEventPlatformTests/PointerEventPointerMoveBetween';
 import EventfulView from './W3CPointerEventsEventfulView';
+import ManyPointersPropertiesExample from './Compatibility/ManyPointersPropertiesExample';
 
 function AbsoluteChildExample({log}: {log: string => void}) {
   return (
@@ -231,5 +232,6 @@ export default {
     },
     CompatibilityAnimatedPointerMove,
     CompatibilityNativeGestureHandling,
+    ManyPointersPropertiesExample,
   ],
 };