# react-native-contextual

> context menu

Latest version **0.11.3** (published 2026-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-contextual
pnpm add react-native-contextual
yarn add react-native-contextual
bun add react-native-contextual
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.11.3 |
| Published | 2026-01-10 |
| First published | 2023-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 111.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | le-ar |
| Maintainers | le-ar |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-contextual
- Repository: https://github.com/le-ar/react-native-contextual
- Homepage: https://github.com/le-ar/react-native-contextual#readme
- Issues: https://github.com/le-ar/react-native-contextual/issues
- npm.io page: https://npm.io/package/react-native-contextual

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.11.3 (latest) — 2026-01-10
- 0.11.2 — 2024-03-06
- 0.11.1 — 2023-10-18
- 0.11.0 — 2023-10-18
- 0.10.5 — 2023-10-10
- 0.10.4 — 2023-10-10
- 0.10.3 — 2023-10-10
- 0.10.2 — 2023-09-05
- 0.10.1 — 2023-09-05
- 0.10.0 — 2023-09-05

## README

# React Native Contextual

<img src="https://github.com/le-ar/react-native-contextual/blob/main/reactNativeContextualExample.gif" width="350px" />

Context menu like `UIContextMenuInteraction` on iOS

- ✅ Android support
- ✅ iOS support
- ✅ Expo support
- ✅ Works seamlessly on both ios and android platforms

## Installation

1. Install [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated). [Installation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation)
2. Install [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
3. Install [react-native-contextual](https://www.npmjs.com/package/react-native-contextual)

```sh
npm install react-native-contextual
```

## Usage

### Blur

Pass component to `background` prop of `ContextualRoot`. You can found an Example in [App.tsx](https://github.com/le-ar/react-native-contextual/blob/main/example/src/App.tsx)

- Expo: [expo-blur](https://www.npmjs.com/package/expo-blur)
- Native: [@react-native-community/blur](https://www.npmjs.com/package/@react-native-community/blur)

### Top of components

```js
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ContextualBackground, ContextualRoot } from 'react-native-contextual';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ContextualRoot
        offsetTop={80}
        offsetBottom={20}
        background={<ContextualBackground />}
      >
        {/* Your code here */}
      </ContextualRoot>
    </GestureHandlerRootView>
  );
}
const result = await multiply(3, 7);
```

### Contexted component

```js
import { Contextual, ContextualMenu } from 'react-native-contextual';

function ContextedComponent() {
  return (
    <Contextual
      style={{}}
      Menu={ContextualMenu}
      menuProps={{
        actions: [
          { key: 'Action1', label: 'Action1', action: () => {} },
          {
            key: 'Action2',
            label: 'Action2',
            action: () => {},
            color: 'red',
          },
        ],
      }}
    >
      {/* Some Component */}
    </Contextual>
  );
}
```

## Example

The source code for the example (showcase) app is under the [Example](https://github.com/le-ar/react-native-contextual/tree/main/example) directory. If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---
_Source: https://npm.io/package/react-native-contextual · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._