Tuesday, October 2, 2018

Create Dropdown Menu In React Native

This tutorial explains how to create simple dropdown menu in react native application. The dropdown menu is most common and integral part of every mobile application, that helps user to move or navigate between different windows/screens of mobile application by selecting the option from the dropdown menu list. This dropdown menu works perfectly in Android and IOS device without any issues.

Create Dropdown Menu In React Native

In this example we are going to create simple dropdown menu, it consists of few options in dropdown menu list. When user select any option from the dropdown list, then it will display selected item in alter box message.

React Native Dropdown Menu :

Lets follow the below steps to create simple dropdown menu in React Native.



Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.


Step-3 :  Install the react-native-popup-menu package in your React Native project. Refer the below screenshot, while installing react-native-popup-menu package.
Command :
npm install react-native-popup-menu --save



Once installation complete check you package.json file in react native application. You  will find  react-native-popup-menu installed version in dependencies section.

{
  "name": "MobileApp56",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-popup-menu": "^0.14.0",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.3.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Step-4: Through react , react-native  packages import all required components.
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Alert, YellowBox} from "react-native";
import { Menu, MenuProvider, MenuOptions, MenuOption, MenuTrigger} from "react-native-popup-menu";

Step-5 : Create constructor in your HomeActivity class with props parameter and Create super method with props parameter in constructor. When user click on dropdown menu, then it will display warning message "Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks." in bottom of the screen. So we are using YellowBox component to hide warning message.
constructor(props) {
     super(props);
     YellowBox.ignoreWarnings([
      'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader'
    ]);
   }

Step-6 : Implement render method and return Menu component wrapped by MenuProvider component. check below component structure for dropdown menu. 
render() {
    return (
      <MenuProvider style={{ flexDirection: "column", padding: 30 }}>
        <Menu onSelect={value => alert(`You Clicked : ${value}`)}>

          <MenuTrigger  >
          <Text style={styles.headerText}>DropDown Menu</Text>
          </MenuTrigger  >

          <MenuOptions>
            <MenuOption value={"Login"}>
              <Text style={styles.menuContent}>Login</Text>
            </MenuOption>
            <MenuOption value={"Register"}>
              <Text style={styles.menuContent}>Register</Text>
            </MenuOption>
            <MenuOption value={"Download"}>
              <Text style={styles.menuContent}>Download</Text>
            </MenuOption>
            <MenuOption value={"Logout"}>
              <Text style={styles.menuContent}>Logout</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true}>
              <Text style={styles.menuContent}>Disabled Menu</Text>
            </MenuOption>
          </MenuOptions>

        </Menu>
      </MenuProvider>
    );
  }

Step-7 : Apply the below style sheet design.
const styles = StyleSheet.create({
    headerText: {
    fontSize: 20,
    margin: 10,
    fontWeight: "bold"
  },
  menuContent: {
    color: "#000",
    fontWeight: "bold",
    padding: 2,
    fontSize: 20
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple dropdown menu list in react native application.
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Alert, YellowBox} from "react-native";
import { Menu, MenuProvider, MenuOptions, MenuOption, MenuTrigger} from "react-native-popup-menu";

export default class HomeActivity extends Component {

  constructor(props) {
     super(props);
     YellowBox.ignoreWarnings([
      'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader'
    ]);
   }

  render() {
    return (
      <MenuProvider style={{ flexDirection: "column", padding: 30 }}>
        <Menu onSelect={value => alert(`You Clicked : ${value}`)}>

          <MenuTrigger  >
          <Text style={styles.headerText}>DropDown Menu</Text>
          </MenuTrigger  >

          <MenuOptions>
            <MenuOption value={"Login"}>
              <Text style={styles.menuContent}>Login</Text>
            </MenuOption>
            <MenuOption value={"Register"}>
              <Text style={styles.menuContent}>Register</Text>
            </MenuOption>
            <MenuOption value={"Download"}>
              <Text style={styles.menuContent}>Download</Text>
            </MenuOption>
            <MenuOption value={"Logout"}>
              <Text style={styles.menuContent}>Logout</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true}>
              <Text style={styles.menuContent}>Disabled Menu</Text>
            </MenuOption>
          </MenuOptions>

        </Menu>
      </MenuProvider>
    );
  }
}

const styles = StyleSheet.create({
    headerText: {
    fontSize: 20,
    margin: 10,
    fontWeight: "bold"
  },
  menuContent: {
    color: "#000",
    fontWeight: "bold",
    padding: 2,
    fontSize: 20
  }
});

Screenshot :

Create Dropdown Menu In React Native

Create Dropdown Menu In React Native

Create Dropdown Menu In React Native

This is all about react native dropdown menu. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


9 comments:

  1. Great Tutorial but, why its not selected the Item ?

    ReplyDelete
  2. Replies
    1. Could you please explain exact issue? we have tested this in android and ios application, it is working fine.

      Delete
  3. This is not working for me either. The menuTrigger is visible, but when I click on it nothing happens.

    ReplyDelete
  4. Can we decrease the size of menu??

    ReplyDelete
    Replies
    1. Yes, You can resize the menu by adding/modifying style sheet layout.

      Delete
  5. Nice article, working fine for me. Thank you. ps would love to see example of populating a menu like this from a MysQL .)

    ReplyDelete
  6. Menu is bydefault on left! I want it on right side of the screen !
    Unable to do it! Please help!

    ReplyDelete