├── README.md
├── android_screenshot.png
├── index.js
├── ios_screenshoot.png
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-option-menu
 2 | A native looking options dialog for IOS, and Android and Web.  ( Functional Component)
 3 | 
 4 | To Download, run: npm i  react-native-option-menu.
 5 | 
 6 | Visit : https://www.npmjs.com/package/react-native-option-menu
 7 | 
 8 | Usage example: 
 9 | 
10 |     import OptionsMenu from "react-native-option-menu";
11 |     const MoreIcon = require("../../assets/more/more.png");
12 | 
13 |     <OptionsMenu
14 |       button={MoreIcon}
15 |       buttonStyle={{ width: 32, height: 8, margin: 7.5, resizeMode: "contain" }}
16 |       destructiveIndex={1}
17 |       options={["Edit", "Delete", "Cancel"]}
18 |       actions={[editPost, deletePost]}/>
19 |                            
20 |                            
21 | Note that button is a required prop (pass in a png of the desired button).
22 | 
23 | As an alternative to the button and style props, you can just pass in a full custom component: 
24 | 
25 | 
26 |     const myIcon = (<Icon name="rocket" size={30} color="#900" />)
27 |     <OptionsMenu
28 |       customButton={myIcon}
29 |       destructiveIndex={1}
30 |       options={["Edit", "Delete", "Cancel"]}
31 |       actions={[editPost,deletePost]}/>
32 | 
33 | 
34 | Destructive index in an iOS only prop. It will appear as a red index. 
35 | 
36 | Options: an array of strings that will be displayed in the menu.
37 | 
38 | Actions: an array of functions to be executed for every menu item. Note that the orders of options an actions have to match.
39 | 
40 | 
41 | iOS Screenshot: 
42 | 
43 | ![Screenshot](ios_screenshoot.png)
44 | 
45 | Android Screenshot:
46 | 
47 | ![Screenshot](android_screenshot.png)
48 | 
49 | 


--------------------------------------------------------------------------------
/android_screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsrajverma/react-native-option-menu/532f72c9409e87514ff496806f30380c12948d2c/android_screenshot.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | import React,{useState,useRef} from "react";
  2 | import {
  3 |   Platform,
  4 |   ActionSheetIOS,
  5 |   UIManager,
  6 |   findNodeHandle,
  7 |   View,
  8 |   TouchableOpacity,
  9 |   Image,
 10 |   Text
 11 | } from "react-native";
 12 | 
 13 | const OptionMenu = (props) =>{
 14 |     const inputRef = useRef();
 15 |     const [open,setOpen] = useState(false);
 16 | 
 17 | 
 18 |     const handleClick = index => {
 19 |         let options = props.options;
 20 |         for (var i = 0; i < options.length; i++) {
 21 |             if (index === i) {
 22 |               if (index === options.length - 1) {
 23 |                 const open = false;
 24 |                 setOpen(open);
 25 |               } else {
 26 |                 if (props.actions[i] !== null) {
 27 |                   props.actions[i]();
 28 |                 }
 29 |               }
 30 |             }
 31 |           }
 32 |     }
 33 | 
 34 |     const handlePressWeb = () => {
 35 |         setOpen(true);
 36 |     };
 37 | 
 38 |     const handlePress = () => {
 39 |         let options = props.options;
 40 |         if (Platform.OS === "ios") {
 41 |           let destructiveIndex = -1;
 42 |           if (
 43 |             Number.isInteger(props.destructiveIndex) &&
 44 |             props.destructiveIndex >= 0
 45 |           ) {
 46 |             destructiveIndex = props.destructiveIndex;
 47 |           }
 48 |           ActionSheetIOS.showActionSheetWithOptions(
 49 |             {
 50 |               options: options,
 51 |               destructiveButtonIndex: destructiveIndex,
 52 |               cancelButtonIndex: options.length - 1
 53 |             },
 54 |             buttonIndex => {
 55 |               handleClick(buttonIndex);
 56 |             }
 57 |           );
 58 |         } else if (Platform.OS === "android") {
 59 | 
 60 |           UIManager.showPopupMenu(
 61 |             findNodeHandle(inputRef.current),
 62 |             options,
 63 |             () => console.log("something went wrong with the popup menu"),
 64 |             (e, i) => {
 65 |               handleClick(i);
 66 |             }
 67 |           );
 68 |         }
 69 |     };
 70 | 
 71 | 
 72 |    let options =  open ? (
 73 |         <View
 74 |         style={{
 75 |           position: "absolute",
 76 |           bottom: "100%",
 77 |           right: "50%",
 78 |           flex: 1,
 79 |           elevation: 3,
 80 |           shadowColor: "black",
 81 |           shadowOpacity: 0.3,
 82 |           shadowOffset: { width: 0, height: 2 },
 83 |           shadowRadius: 4,
 84 |           borderRadius: 5,
 85 |           backgroundColor: "white"
 86 |         }}
 87 |       >
 88 |       { props.options.map((option, index) => {
 89 |         return (
 90 |           <View key={option}>
 91 |             <TouchableOpacity
 92 |               style={{ padding: 10 }}
 93 |               onPress={() => handleClick(index)}
 94 |             >
 95 |               <Text style={{ textAlign: "center" }}>{option}</Text>
 96 |             </TouchableOpacity>
 97 | 
 98 |             {index < props.options.length - 1 && (
 99 |               <View
100 |                 style={{
101 |                   flex: 1,
102 |                   height: 1,
103 |                   backgroundColor: "lightgray"
104 |                 }}
105 |               />
106 |             )}
107 |           </View>
108 |         );
109 |       })}
110 |     </View>) : null;
111 | 
112 |     let component = props.button ? (
113 |         <Image source={props.button} style={props.buttonStyle} />
114 |     ) : (
115 |         props.customButton
116 |     );
117 |     if (Platform.OS === "web") {
118 |         return (
119 |         <View>
120 |             <View>
121 |             <TouchableOpacity ref={ inputRef } onPress={handlePressWeb}>
122 |                 {component}
123 |             </TouchableOpacity>
124 |             </View>
125 |             {options}
126 |         </View>
127 |         );
128 |     } else {
129 |         return (
130 |         <View>
131 |             <TouchableOpacity ref={ inputRef } onPress={handlePress}>
132 |             {component}
133 |             </TouchableOpacity>
134 |         </View>
135 |         );
136 |     }
137 | 
138 | }
139 | 
140 | export default OptionMenu;
141 | 


--------------------------------------------------------------------------------
/ios_screenshoot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsrajverma/react-native-option-menu/532f72c9409e87514ff496806f30380c12948d2c/ios_screenshoot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-option-menu",
 3 |   "version": "1.1.3",
 4 |   "description": "A native looking options dialog for Ios and  Android",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "react-native",
11 |     "react-native-menu",
12 |     "react-native-options-menu",
13 |     "react-native-popup-menu",
14 |     "overflow",
15 |     "menu",
16 |     "options",
17 |     "react-component",
18 |     "ios",
19 |     "android",
20 |     "web"
21 |   ],
22 |   "author": "itsrajverma",
23 |   "license": "MIT",
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "https://github.com/itsrajverma/react-native-option-menu.git"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------