Fix pointerEvents passed by inline styles

Author: staszekscp

packages/react-native-web/src/exports/StyleSheet/compiler/index.js

@@ -387,15 +387,15 @@ function createAtomicRules(identifier: string, property, value): Rules {
       } else if (value === 'none') {
         finalValue = 'none!important';
         const block = createDeclarationBlock({ pointerEvents: 'none' });
-        rules.push(`${selector} * ${block}`);
+        rules.push(`${selector}>* ${block}`);
       } else if (value === 'box-none') {
         finalValue = 'none!important';
         const block = createDeclarationBlock({ pointerEvents: 'auto' });
-        rules.push(`${selector} * ${block}`);
+        rules.push(`${selector}>* ${block}`);
       } else if (value === 'box-only') {
         finalValue = 'auto!important';
         const block = createDeclarationBlock({ pointerEvents: 'none' });
-        rules.push(`${selector} * ${block}`);
+        rules.push(`${selector}>* ${block}`);
       }
       const block = createDeclarationBlock({ pointerEvents: finalValue });
       rules.push(`${selector}${block}`);

packages/react-native-web/src/modules/createDOMProps/index.js

@@ -879,8 +879,11 @@ const createDOMProps = (elementType, props, options) => {
       `props.pointerEvents is deprecated. Use style.pointerEvents`
     );
   }
+  const pointerEventsValue =
+    StyleSheet.flatten(style).pointerEvents || pointerEvents;
+
   const [className, inlineStyle] = StyleSheet(
-    [style, pointerEvents && pointerEventsStyles[pointerEvents]],
+    [style, pointerEventsValue && pointerEventsStyles[pointerEventsValue]],
     {
       writingDirection: 'ltr',
       ...options