React Native Outside Press

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

Compatibility

iOS	Android	Web	Windows	macOS	Expo
✅	✅	✅	✅	✅	✅

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.