React Native Contextual

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. Installation
2. Install react-native-gesture-handler
3. Install react-native-contextual

npm install react-native-contextual

Usage

Blur

Pass component to background prop of ContextualRoot. You can found an Example in App.tsx

• Expo: expo-blur
• Native: @react-native-community/blur

Top of components

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

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 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 to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library