Merge pull request #260 from dcangulo/chore/minor-changes

Chore/minor changes

Author: dcangulo

README.md

@@ -16,24 +16,32 @@ yarn add react-native-outside-press
 ```
 
 ## Usage
+
+### EventProvider
 Wrap your app with `EventProvider`.
+
 ```js
 import { EventProvider } from 'react-native-outside-press';
 
 export default function App() {
   return (
-    <EventProvider style={{ flex: 1 }}>
+    <EventProvider>
       <RestOfYourApp />
     </EventProvider>
   );
 }
 ```
-### `EventProvider` Props
-| **Name** | **Type** | **Default**                             |
-|----------|----------|-----------------------------------------|
-| All of [`ViewProps`](https://reactnative.dev/docs/view#props) |
 
-Then wrap every component you want to detect outside press.
+#### Props
+
+| Name        | Description         | Type                                                       | Default       | Required? |
+|-------------|---------------------|------------------------------------------------------------|---------------|-----------|
+| `style`     |                     | [ViewStyle](https://reactnative.dev/docs/view-style-props) | `{ flex: 1 }` | `false`   |
+| `ViewProps` | Inherits ViewProps. | [ViewProps](https://reactnative.dev/docs/view#props)       |               | `false`   |
+
+### OutsidePressHandler
+Wrap every component you want to detect outside press with `OutsidePressHandler`.
+
 ```js
 import { View } from 'react-native';
 import OutsidePressHandler from 'react-native-outside-press';
@@ -50,15 +58,17 @@ export default function MyComponent() {
   );
 }
 ```
-### `OutsidePressHandler` Props
-| **Name**         | **Type** | **Default**                     |
-|------------------|----------|---------------------------------|
-| `onOutsidePress` | function | `undefined`                     |
-| `disabled`       | boolean  | `undefined`                     |
-| All of [`ViewProps`](https://reactnative.dev/docs/view#props) |
+
+#### Props
+
+| Name             | Description                                          | Type                                                 | Default       | Required? |
+|------------------|------------------------------------------------------|------------------------------------------------------|---------------|-----------|
+| `onOutsidePress` | Function to run when pressed outside of component.   | function                                             |               | `true`    |
+| `disabled`       | Controls whether `onOutsidePress` should run or not. | boolean                                              | `false`       | `false`   |
+| `ViewProps`      | Inherits ViewProps.                                  | [ViewProps](https://reactnative.dev/docs/view#props) |               | `false`   |
 
 ## Changelogs
 See [CHANGELOGS.md](CHANGELOGS.md)
 
 ## License
-Copyright © 2022 David Angulo, released under the MIT license, see [LICENSE](LICENSE).
+Copyright © 2023 David Angulo, released under the MIT license, see [LICENSE](LICENSE).

example/src/App.tsx

@@ -6,16 +6,21 @@ export default function App() {
   return (
     <EventProvider style={styles.container}>
       <OutsidePressHandler
-        disabled={false}
         onOutsidePress={() => {
           console.log('Pressed outside the black box!');
         }}
       >
-        <View style={styles.blackBox} />
+        <View style={styles.blackBox}>
+          <Text
+            style={styles.text}
+            onPress={() => console.log('Pressed inside blackbox!')}
+          >
+            Press Me
+          </Text>
+        </View>
       </OutsidePressHandler>
       <Text onPress={() => console.log('Pressed!')}>Press Me</Text>
       <OutsidePressHandler
-        disabled={false}
         onOutsidePress={() => {
           console.log('Pressed outside the red box!');
         }}
@@ -38,4 +43,7 @@ const styles = StyleSheet.create({
     height: 200,
     backgroundColor: 'red',
   },
+  text: {
+    color: 'white',
+  },
 });

src/components/event-provider.tsx

@@ -1,15 +1,25 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 import type { ViewProps } from 'react-native';
 import useEventStore from '../hooks/use-event-store';
 import EventContext from '../event-context';
 import Container from './container';
 
 export default function EventProvider(props: ViewProps) {
+  const { style, ...rest } = props;
   const eventStore = useEventStore();
 
   return (
     <EventContext.Provider value={eventStore}>
-      <Container {...props}>{props.children}</Container>
+      <Container style={[styles.container, style]} {...rest}>
+        {props.children}
+      </Container>
     </EventContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

src/components/outside-press-handler.tsx

@@ -6,11 +6,11 @@ import deepClone from '../utils/deep-clone';
 
 interface IOutsidePressHandlerProps extends ViewProps {
   onOutsidePress: () => void;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
 export default function OutsidePressHandler(props: IOutsidePressHandlerProps) {
-  const { children, onOutsidePress, disabled } = props;
+  const { children, onOutsidePress, disabled = false } = props;
   const id: string = useRef(Math.random().toString()).current;
   const { appendEvent, removeEvent, setSkippedEventId } = useEvent();
   const setSkippedEventIdFunc = () => setSkippedEventId(id);