React-native-outside-press NPM

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`