[fix] setNativeProps and pointerEvent prop

The pointerEvent prop is converted into a DOM style property and needs to be
accounted for by setNativeProps.

Close #1656
Fix #1655

Author: necolas

packages/react-native-web/src/exports/Picker/index.js

@@ -54,16 +54,14 @@ const Picker = forwardRef<PickerProps, *>((props, forwardedRef) => {
     }
   });
 
-  usePlatformMethods(hostRef, [], style);
-
   function handleChange(e: Object) {
     const { selectedIndex, value } = e.target;
     if (onValueChange) {
       onValueChange(value, selectedIndex);
     }
   }
 
-  return createElement('select', {
+  const supportedProps = {
     children,
     disabled: enabled === false ? true : undefined,
     onChange: handleChange,
@@ -72,7 +70,11 @@ const Picker = forwardRef<PickerProps, *>((props, forwardedRef) => {
     testID,
     value: selectedValue,
     ...other
-  });
+  };
+
+  usePlatformMethods(hostRef, supportedProps);
+
+  return createElement('select', supportedProps);
 });
 
 // $FlowFixMe

packages/react-native-web/src/exports/Text/index.js

@@ -121,7 +121,6 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
   ];
 
   useElementLayout(hostRef, onLayout);
-  usePlatformMethods(hostRef, classList, style);
   useResponderEvents(hostRef, {
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
@@ -160,6 +159,8 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
   supportedProps.ref = setRef;
   supportedProps.style = style;
 
+  usePlatformMethods(hostRef, supportedProps);
+
   const element = createElement(component, supportedProps);
 
   return hasTextAncestor ? (

packages/react-native-web/src/exports/TextInput/index.js

@@ -330,7 +330,6 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
   );
 
   useElementLayout(hostRef, onLayout);
-  usePlatformMethods(hostRef, classList, style);
   useResponderEvents(hostRef, {
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
@@ -370,6 +369,8 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
   supportedProps.style = style;
   supportedProps.type = multiline ? undefined : type;
 
+  usePlatformMethods(hostRef, supportedProps);
+
   return createElement(component, supportedProps);
 });
 

packages/react-native-web/src/exports/View/index.js

@@ -116,7 +116,6 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   );
 
   useElementLayout(hostRef, onLayout);
-  usePlatformMethods(hostRef, classList, style);
   useResponderEvents(hostRef, {
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
@@ -141,6 +140,8 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   supportedProps.ref = setRef;
   supportedProps.style = style;
 
+  usePlatformMethods(hostRef, supportedProps);
+
   return createElement('div', supportedProps);
 });
 

packages/react-native-web/src/hooks/usePlatformMethods.js

@@ -7,18 +7,18 @@
  * @flow
  */
 
-import type { GenericStyleProp } from '../types';
 import type { ElementRef } from 'react';
 
 import UIManager from '../exports/UIManager';
 import createDOMProps from '../modules/createDOMProps';
 import { useImperativeHandle, useRef } from 'react';
 
-function setNativeProps(node, nativeProps, classList, style, previousStyleRef) {
+function setNativeProps(node, nativeProps, classList, pointerEvents, style, previousStyleRef) {
   if (node != null && nativeProps) {
     const domProps = createDOMProps(null, {
+      pointerEvents,
       ...nativeProps,
-      classList: [nativeProps.className, classList],
+      classList: [classList, nativeProps.className],
       style: [style, nativeProps.style]
     });
 
@@ -45,12 +45,9 @@ function setNativeProps(node, nativeProps, classList, style, previousStyleRef) {
  * Adds non-standard methods to the hode element. This is temporarily until an
  * API like `ReactNative.measure(hostRef, callback)` is added to React Native.
  */
-export default function usePlatformMethods(
-  hostRef: ElementRef<any>,
-  classList: Array<boolean | string>,
-  style: GenericStyleProp<any>
-) {
+export default function usePlatformMethods(hostRef: ElementRef<any>, props: Object) {
   const previousStyleRef = useRef(null);
+  const { classList, style, pointerEvents } = props;
 
   useImperativeHandle(
     hostRef,
@@ -61,9 +58,9 @@ export default function usePlatformMethods(
         UIManager.measureLayout(hostNode, relativeToNode, failure, success);
       hostNode.measureInWindow = callback => UIManager.measureInWindow(hostNode, callback);
       hostNode.setNativeProps = nativeProps =>
-        setNativeProps(hostNode, nativeProps, classList, style, previousStyleRef);
+        setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef);
       return hostNode;
     },
-    [classList, hostRef, style]
+    [hostRef, classList, pointerEvents, style]
   );
 }