Merge pull request #3 from dcangulo/bugfix/events-run-earlier

Bugfix/events run earlier

Author: dcangulo

CHANGELOGS.md

@@ -1,5 +1,8 @@
 # Changelogs
 
+## 1.0.2 (2022-07-12)
+* Fixed unexpected behavior on iOS and Android.
+
 ## 1.0.1 (2022-07-11)
 * Fixed a bug where a dev dependency is in dependencies.
 

README.md

@@ -28,7 +28,7 @@ export default function App() {
   );
 }
 ```
-`EventProvider` accepts `ViewProps`. See: https://reactnative.dev/docs/view#props
+`EventProvider` accepts `ViewProps`. See: [ViewProps](https://reactnative.dev/docs/view#props)
 
 Then wrap every component you want to detect outside press.
 ```js
@@ -47,6 +47,7 @@ export default function MyComponent() {
   );
 }
 ```
+`OutsidePressHandler` accepts `onOutsidePress` prop and `ViewProps`. See: [ViewProps](https://reactnative.dev/docs/view#props)
 
 ## Changelogs
 See [CHANGELOGS.md](CHANGELOGS.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-outside-press",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "airbnb/react-outside-click-handler but for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/container.tsx

@@ -8,11 +8,11 @@ export default function Container(props: ViewProps) {
   const { events, skippedEventId, setSkippedEventId } = useEvent();
   const runEvents = () => {
     events.forEach((event: IEvent) => {
-      if (event.id === skippedEventId) return;
+      if (event.id === (global as any).rnopSkippedEventId) return;
       event.onOutsidePress();
     });
 
-    if (skippedEventId) setSkippedEventId('');
+    if ((global as any).rnopSkippedEventId) setSkippedEventId('');
   };
 
   useEffect(() => {

src/components/outside-press-handler.tsx

@@ -1,16 +1,16 @@
 import React, { useRef, useEffect } from 'react';
-import { Pressable } from 'react-native';
+import { View, Platform } from 'react-native';
+import type { ViewProps } from 'react-native';
 import useEvent from '../hooks/use-event';
 import deepClone from '../utils/deep-clone';
 
-interface IOutsidePressHandlerProps {
-  children: JSX.Element;
+interface IOutsidePressHandlerProps extends ViewProps {
   onOutsidePress: () => void;
 }
 
 export default function OutsidePressHandler(props: IOutsidePressHandlerProps) {
   const { children, onOutsidePress } = props;
-  const id = useRef(Math.random().toString()).current;
+  const id: string = useRef(Math.random().toString()).current;
   const { appendEvent, removeEvent, setSkippedEventId } = useEvent();
   const setSkippedEventIdFunc = () => setSkippedEventId(id);
 
@@ -20,9 +20,21 @@ export default function OutsidePressHandler(props: IOutsidePressHandlerProps) {
     return () => removeEvent(id);
   }, [onOutsidePress]);
 
-  return (
-    <Pressable onPress={setSkippedEventIdFunc}>
-      {deepClone(children, setSkippedEventIdFunc)}
-    </Pressable>
-  );
+  return Platform.select({
+    web: (
+      <View
+        {...props}
+        /*
+        // @ts-ignore */
+        onClick={setSkippedEventIdFunc}
+      >
+        {deepClone(children, setSkippedEventIdFunc)}
+      </View>
+    ),
+    default: (
+      <View {...props} onTouchStart={setSkippedEventIdFunc}>
+        {children}
+      </View>
+    ),
+  });
 }

src/hooks/use-event-store.ts

@@ -13,7 +13,10 @@ export default function useEventStore() {
     appendEvent: (newEvent: IEvent) => setEvents((state) => [...state, newEvent]),
     removeEvent: (id: string) => setEvents((state) => state.filter((event) => event.id !== id)),
     skippedEventId,
-    setSkippedEventId,
+    setSkippedEventId: (id: string) => {
+      (global as any).rnopSkippedEventId = id;
+      setSkippedEventId(id);
+    },
   }), [skippedEventId, events]);
 
   return eventActions;

src/utils/deep-clone.ts

@@ -1,19 +1,18 @@
 import React from 'react';
 
-export default function deepClone(children: JSX.Element, event: () => void) {
-  return React.Children.map(children, (child: React.ReactNode): JSX.Element => {
-    // @ts-ignore
+export default function deepClone(children: React.ReactNode, func: () => void) {
+  return React.Children.map(children, (child: React.ReactNode): React.ReactNode => {
     if (!React.isValidElement(child)) return child;
 
     const props: any = { ...child.props };
 
     if (typeof child.props.onPress === 'function') {
       props.onPress = () => {
-        event();
+        func();
         return child.props.onPress();
       };
     }
 
-    return React.cloneElement(child, props, deepClone(child.props.children, event));
+    return React.cloneElement(child, props, deepClone(child.props.children, func));
   });
 }