How to create custom dropdown menu react native

Question

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

Answer 1

In case someone would need a custom dropdown menu, i made this using react native animated:

click to see exemple

import React, { useState } from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function DropDown() {
    const [show, setShow] = useState(false);
    const progressHeight = useSharedValue(0);
    const arrowHeight = useSharedValue(0)

    const animatedStyle = useAnimatedStyle(() => {
        return {
            height: progressHeight.value,
        }
    });

    const animatedArrow = useAnimatedStyle(() => {
        return {
             borderTopWidth: arrowHeight.value,
             borderBottomWidth: arrowHeight.value,
        }
    });

    const startAnimation = () => {
        progressHeight.value === 0 && (
            (arrowHeight.value = withTiming(10, { duration: 1 })),
            (progressHeight.value = withTiming(100, { duration: 300 })), // Adjust your height as needed here (100)
            (setShow(true)))
        progressHeight.value > 0 && (
            (progressHeight.value = withTiming(0, { duration: 300 })),
            setTimeout(() => {
                arrowHeight.value = withTiming(0, { duration: 1 })
                setShow(false);
            }, 200))
    }

    return (
        <View>
            <TouchableOpacity onPress={startAnimation}>
                <Icon name="dots-three-vertical" color="white" size={25} />
            </TouchableOpacity>
            <Animated.View style={[styles.container, animatedStyle]}>
                {show && (
                    <View className="p-4 justify-center">
                        <Text className="text-lg">Option 1</Text>
                        <Text className="text-lg">Option 2</Text>
                        <Text className="text-lg">Option 3</Text>
                    </View>
                )}
            </Animated.View>
            <Animated.View style={[styles.arrow, animatedArrow]} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: 150,
        height: 0,
        backgroundColor: 'white',
        position: 'absolute',
        right: -12,
        marginTop: 30,
        borderRadius: 10,
        elevation: 15,
        top: 10,
        overflow: 'hidden'
    },
    arrow: {
        position: 'absolute',
        top: 25,
        right: 7,
        borderTopWidth: 0,
        borderTopColor: 'transparent',
        borderBottomWidth: 0,
        borderBottomColor: 'transparent',
        borderRightWidth: 10,
        borderRightColor: 'white',
        transform: [{ rotate: '90deg' }],
    },
});

Answer 2

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.

Answer 3

Just install react-native-popup-menu and use it as explained in the docs.

you can build that three dots easily by using react-native-elements with this code (Just for 3 dots):

import { Icon } from 'react-native-elements';

.
.
.

  <Icon
      name={'dots-three-vertical'}
      type={'entypo'}
      size={20}
      color='#FFF'
  />

Answer 4

I think you can use Picker component from react native and for the details you can read picker documentation:

code example :

import {View,Text,Picker} from 'react-native';

 //in your render method
 return (
  <View>
   <Text}>Choose</Text>
    <Picker
       selectedValue={this.state.menu}
       onValueChange={(itemValue, itemIndex) => this.setState({menu:emValue})}
       mode="dropdown">
       <Picker.Item label="Add Note" value="addnote" />
       <Picker.Item label="Share" value="share" />
       <Picker.Item label="Vault" value="vault" />
     </Picker>
  </View>
 );

I hope this answer can help you.