This is Kebab Menu Library.

Installation

1.Install the package via npm:

npm install @manishcodefire/kebabmenu

Code snippets:

2.Here's an example of how you can use the component

const options = () => {
  const imageRoute = require('../../assets/kebab.png')

  const newArr = [
    {
      id: '1',
      name: 'Option 1',
      icon: require('../../assets/search.png'),
    },
    {
      id: '2',
      name: 'Option 2',
      icon: require('../../assets/search.png'),
    },
    {
      id: '3',
      name: 'Option 3',
      icon: require('../../assets/search.png'),
    },
    {
      id: '4',
      name: 'Option 4',
      icon: require('../../assets/search.png'),
    },
    {
      id: '5',
      name: 'Option 5',
      icon: require('../../assets/search.png'),
    },
    {
      id: '6',
      name: 'Option 6',
      icon: require('../../assets/search.png'),
    },
  ];

  const navigateToPage = option => {
    Alert.alert('Navigate to...', option.name);
  };
  return (
    <View>
      <KebabMenu imagePath={imageRoute} imageStyle={{height: 20, width: 20,}} kebabList={options} navigateToPage={navigateToPage} />
    </View>
  );
};

export default Kebab;

Kebab Menu Props:

Props

| Props Name | Params | isRequire | Description | |--------------------|----------------|----------------|-----------------------------------------| | kebabList | Array | Yes | Data is a plain array | | navigateToPage | Function | Yes | Called when click a menu item | | imagePath | Path | No | Image path of kebab menu icon | | imageStyle | ImageStyle | No | Manage size of image | | listBgColor | String | No | Background color of list item | | textColor | String | No | List items text color | | textSize | Number | No | List item text size | | top | Number | No | Icon list space from top | | right | Number | No | Icon list space from right | | borderBottomWidth | Number | No | Bottom border width between the items | | borderBottomColor | String | No | Color of bottom line of items | | borderWidthAround | Number | No | Border width of item box surrounding | | borderColorAround | String | No | Border color of item box surrounding | | itemContainerWidth | Number | No | Manage the width of item container |