How to create custom dropdown menu react native

user_7454155 0
Viewed 11941

I want to create a drop-down menu like the following in react native. Please suggest a way to do it.

enter image description here

react-native reactjs
3 Answers

Incase some people still look for such an option, I implemented it just now into my own app, first of all you need to wrap your complete app inside the Menu-Provider-Component and when youre done (you need to do this 100% else its not working, pls read the docs!), just past the Menu like here inside any of your screens:

import { Feather } from '@expo/vector-icons'; 
import { Menu, MenuOptions, MenuOption, MenuTrigger} from 'react-native-popup-menu';
<Menu style={{marginRight:5}}>
   <MenuTrigger>
      <Feather name="menu" size={30} color="white" />
   </MenuTrigger>
      <MenuOptions>
         <MenuOption onSelect={() => alert(`pressed1`)} >
            <Text style={{color: 'green'}}>Option1</Text>
         </MenuOption>
         <MenuOption onSelect={() => alert(`pressed2`)} >
            <Text style={{color: 'red'}}>Option2</Text>
         </MenuOption>
         <MenuOption onSelect={() => alert(`pressed3`)} >
            <Text style={{color: 'yellow'}}>Option3</Text>
         </MenuOption>
      </MenuOptions>
   </Menu>

Like you see, I used an Icon which I placed inside the MenuTrigger component. I wanted to have an Icon which I click upon and after that the menu opens, exactly how the creator of this question wanted.

OnSelect executes a function which will be called if you choose the option in the dropdown menu, basicly its nothing else then onPress with a button.

user_109003540
Related