Skip to content

le-ar/react-native-contextual

Repository files navigation

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

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