diff --git a/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js b/packages/rn-tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js new file mode 100644 index 00000000000..eddcda5f45d --- /dev/null +++ b/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 ( + <> + + + {Object.entries(data).map( + //$FlowFixMe can't supply generic for Object.entries + ([key, evt]: [string, PointerEvent['nativeEvent']]) => ( + + PointerID: {evt.pointerId} + + Offset: [{evt.offsetX.toPrecision(3)},{' '} + {evt.offsetY.toPrecision(3)}] + + + Coordinates: [{evt.clientX.toPrecision(3)},{' '} + {evt.clientY.toPrecision(3)}] + + Button: {evt.button} + Pressure: {evt.pressure} + + ), + )} + + + ); +} + +export default ({ + name: 'many_pointers_properties_example', + description: 'Display of properties for multiple pointers', + title: 'Display Properties of many pointers', + render(): React.Node { + return ; + }, +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js index 275f65845c7..bf0ae9041bb 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js +++ b/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, ], };