React Native Outside Press

airbnb/react-outside-click-handler but for React Native.

Compatibility

| iOS | Android | Web | Windows | macOS | Expo | |--------------------|--------------------|--------------------|--------------------|--------------------|--------------------| | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |

Installation

yarn add react-native-outside-press

Usage

EventProvider

Wrap your app with EventProvider.

import { EventProvider } from 'react-native-outside-press';

export default function App() {
  return (
    <EventProvider>
      <RestOfYourApp />
    </EventProvider>
  );
}

Props

| Name | Description | Type | Default | Required? | |-------------|---------------------|------------------------------------------------------------|---------------|-----------| | style | | ViewStyle | { flex: 1 } | false | | ViewProps | Inherits ViewProps. | ViewProps | | false |

OutsidePressHandler

Wrap every component you want to detect outside press with OutsidePressHandler.

import { View } from 'react-native';
import OutsidePressHandler from 'react-native-outside-press';

export default function MyComponent() {
  return (
    <OutsidePressHandler
      onOutsidePress={() => {
        console.log('Pressed outside the box!');
      }}
    >
      <View style={{ height: 200, width: 200, backgroundColor: 'black' }} />
    </OutsidePressHandler>
  );
}

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 | | false |

Changelogs

See CHANGELOGS.md

License

Copyright © 2023 David Angulo, released under the MIT license, see LICENSE.