How to use react-native-popup-menu - 6 common examples

To help you get started, we’ve selected a few react-native-popup-menu examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github instea / react-native-popup-menu / examples / Demo.js View on Github external
{ Component: Example, name: 'Advanced example' },
  { Component: ControlledExample, name: 'Controlled example' },
  { Component: MenuMethodsExample, name: 'Controlling menu using menu methods' },
  { Component: ExtensionExample, name: 'Extensions example' },
  { Component: ModalExample, name: 'Modal example' },
  { Component: StylingExample, name: 'Styling example' },
  { Component: TouchableExample, name: 'Touchable config example' },
  { Component: NonRootExample, name: 'Non root example' },
  { Component: CloseOnBackExample, name: 'Close on back button press example' },
  { Component: FlatListExample, name: 'Using FlatList' },
  { Component: InFlatListExample, name: 'Menu in FlatList' },
  { Component: PopoverExample, name: 'Popover renderer' },
];

// show debug messages for demos.
Menu.debug = true;

export default class Demo extends Component {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      selected: undefined,
    };
  }
  render() {
    if (this.state.selected) {
      return <this.state.selected/>;
    }
    return (
        <View style={styles.container}>
          <View>
            <Text>Select example:</Text>
github instea / react-native-popup-menu / examples / FlatListExample.js View on Github external
import React, { Component } from 'react';
import { FlatList, Alert, StyleSheet } from 'react-native';
import {
  MenuProvider,
  Menu,
  MenuTrigger,
  MenuOptions,
  MenuOption,
} from 'react-native-popup-menu';

Menu.debug = true;

const data = new Array(500)
  .fill(0)
  .map((a, i) => ({ key: i, value: 'item' + i }));

export default class App extends Component {
  render() {
    return (
      <MenuProvider style={styles.container}>
        <Menu onSelect={value => Alert.alert(value)}>
          <MenuTrigger text="Select option" />
          <MenuOptions>
            <FlatList
              data={data}
              renderItem={({ item }) => (
                <MenuOption value={item.value} text={item.value} />
github instea / react-native-popup-menu / examples / ExtensionExample.js View on Github external
<MenuOption
    value={props.value}
    text={(props.checked ? '\u2713 ' : '') + props.text}
  />
)

const IconOption = ({iconName, text, value}) => (
  <MenuOption value={value}>
    <Text>
      <Icon name={iconName} />
      {' ' + text}
    </Text>
  </MenuOption>
)

const { computePosition } = renderers.ContextMenu;
const roundedStyles = {
  backgroundColor: 'yellow',
  borderRadius: 30,
}
class RoundedContextMenu extends React.Component {
  render() {
    const { style, children, layouts, ...other } = this.props;
    const position = computePosition(layouts);
    return (
      <View {...other} style={[roundedStyles, style, position]}>
        {children}
      </View>
    );
  }
}
github instea / react-native-popup-menu / examples / ExtensionExample.js View on Github external
const ExtensionExample = () => (
  <MenuProvider style={{flexDirection: 'column', padding: 30}}>
    <Text>Extensible hello world!</Text>
    <Menu
      onSelect={value => alert(`Selected number: ${value}`)}
      renderer={renderers.NotAnimatedContextMenu}
    >
      <MenuTrigger text='Select extension options' />
      <MenuOptions>
        <CheckedOption value={1} text='One' />
        <CheckedOption checked value={2} text='Two' />
        <IconOption value={3} iconName='rocket' text='Three' />
      </MenuOptions>
    </Menu>
    <Menu renderer={RoundedContextMenu}>
      <MenuTrigger text='Select rounded menu' />
      <MenuOptions>
        <MenuOption text="A"/>
        <MenuOption text="B"/>
      </MenuOptions>
    </Menu>
  </MenuProvider>
github staltz / manyverse / src / frontend / screens / central / connections-tab / view / SlideInMenu.ts View on Github external
export default function SlideInMenu(state: State) {
  const {itemMenu} = state;
  const {type, target, opened} = itemMenu;
  return h(
    Menu,
    {
      sel: 'slide-in-menu',
      renderer: renderers.SlideInMenu,
      opened,
    },
    [
      h(MenuTrigger, {disabled: true}),
      h(
        MenuOptions,
        type === 'conn'
          ? connMenuOptions(target)
          : type === 'room'
          ? roomMenuOptions()
          : type === 'staging'
          ? stagingMenuOptions()
          : type === 'staged-room'
          ? stagedRoomMenuOptions()
          : type === 'invite'
          ? inviteMenuOptions()
github instea / react-native-popup-menu / examples / MenuMethodsExample.js View on Github external
import Menu, {
  MenuProvider,
  MenuOptions,
  MenuOption,
  MenuTrigger,
  withMenuContext,
} from 'react-native-popup-menu';

const Openner = (props) => (
  <TouchableOpacity style={{ paddingTop: 50 }}
    onPress={() => props.ctx.menuActions.openMenu('menu-1')}>
    <Text>Open menu from context</Text>
  </TouchableOpacity>
);

const ContextOpenner = withMenuContext(Openner);

export default class ControlledExample extends Component {

  onOptionSelect(value) {
    alert(`Selected number: ${value}`);
    if (value === 1) {
      this.menu.close();
    }
    return false;
  }

  openMenu() {
    this.menu.open();
  }

  onRef = r => {

react-native-popup-menu

extensible popup/context menu for react native

ISC
Latest version published 3 months ago

Package Health Score

78 / 100
Full package analysis

Similar packages

    Popular JavaScript code snippets

    Find secure code to use in your application or website