react-native-outside-press - GitLite

KO | EN

gitlite — search

#react #typescript #llm #go #machine-learning #java #windows #awesome #cli #awesome-list #security #mcp #openai #open-source

react-native-outside-press

(★ 145)

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

File Explorer

Download Latest Version (.zip)

- - main.yml
- dependabot.yml
- FUNDING.yml
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - splash.png
- - App.tsx
- App.js
- app.json
- babel.config.js
- metro.config.js
- package.json
- tsconfig.json
- webpack.config.js
- yarn.lock
- bootstrap.js
- - container.tsx
  - event-provider.tsx
  - outside-press-handler.tsx
- - use-event-store.ts
  - use-event.ts
- - deep-clone.ts
- event-context.ts
- index.ts
.gitignore
.watchmanconfig
.yarnrc
babel.config.js
CHANGELOGS.md
lefthook.yml
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/dcangulo/react-native-outside-press

Downloads the entire project code from GitHub to your computer.

cd react-native-outside-press

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add react-native-outside-press

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Outside Press
[![Package version](https://img.shields.io/npm/v/react-native-outside-press?style=for-the-badge&labelColor=000000)](https://www.npmjs.com/package/react-native-outside-press)
[![MIT license](https://img.shields.io/badge/License-MIT-brightgreen.svg?style=for-the-badge&labelColor=000000)](https://raw.githubusercontent.com/dcangulo/react-native-outside-press/main/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-hotpink.svg?style=for-the-badge&labelColor=000000)](https://github.com/dcangulo/react-native-outside-press/pulls)

[airbnb/react-outside-click-handler](https://github.com/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
```bash
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>
      <RestOfYourApp />
    </EventProvider>
  );
}
```

#### 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';

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](https://reactnative.dev/docs/view#props) |               | `false`   |

## Changelogs
See [CHANGELOGS.md](CHANGELOGS.md)

## License
Copyright © 2023 David Angulo, released under the MIT license, see [LICENSE](LICENSE).