React native action bar and react native menu

Question

I am new to React-Native and love it so far. I am trying to create a screen (for the cross-platform app) with a menu icon on top right and when clicked, I want to open a men

Answer 1

I try to complete with your case, i add library react-native-drawer-layout for create menu drawer layout . You can find in this for installation.

Step 1 - Create menu list (I created a separate to make it easier when I want to add another menu), It's content only ArrayList. I called that file Constants, and you can write in Constants.js like :

export const MENU_LIST = [
  { index: 1, name: 'Action' },
  { index: 2, name: 'Sign Out' },
]

Step 2 - I create Menu component for showing menu list. In Menu.js you write like :

import React, { Component } from 'react';
import { View, ScrollView, Text, TouchableOpacity } from 'react-native';

const menuList = require('./Constants.js');

export default class Menu extends Component {
  render() {
    return (
      
        
          {menuList.MENU_LIST.map(item => (
             console.log('entered menu')}
            >
              {item.name}
            
          ))}
        
      
    );
  }
}

Step 3 - Refactor main component like :

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
import ActionBar from 'react-native-action-bar';
import DrawerLayout from 'react-native-drawer-layout';

import Menu from './Menu';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerClosed: true,
    };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.setDrawerState = this.setDrawerState.bind(this);
  }

  setDrawerState() {
    this.setState({
      drawerClosed: !this.state.drawerClosed,
    });
  }

  toggleDrawer = () => {
    if (this.state.drawerClosed) {
      this.DRAWER.openDrawer();
    } else {
      this.DRAWER.closeDrawer();
    }
  }

  render() {
    return (
       {
          this.DRAWER = drawerElement;
        }}
        drawerPosition={DrawerLayout.positions.left}
        onDrawerOpen={this.setDrawerState}
        onDrawerClose={this.setDrawerState}
        renderNavigationView={() => }
      >
        

      
    );
  }
}

const styles = StyleSheet.create({
  screen: {
    backgroundColor: '#33cc33',
    flex: 1,
    paddingTop: 10,
    alignItems: 'center',
    //padding: 10
  },
});

AppRegistry.registerComponent('Main', () => App);

In my emulator, that will display like:

and when i klik menu icon, that will display like:

UPDATE-1 :

if you want to make component drawer menu not fills up to bottom, you can play on style in component

, i give margin for wrapper like:

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#33cc33',
    marginTop: 50,

  },

  listMenu: {
    color: 'white', 
    fontSize: 16, 
    paddingLeft: 20, 
    paddingTop: 12,
    paddingBottom: 12,
  }

});

And add style to component in

like :

export default class Menu extends Component {
  render() {
    return (
       //add style wrapper
        
          {menuList.MENU_LIST.map(item => (
             console.log('entered menu')}
            >
              {item.name} //add style menu
            
          ))}
        
      
    );
  }
}

Full code in Menu.js like :

import React, { Component, PropTypes } from 'react';
import { View, ScrollView, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const menuList = require('./Constants.js');

export default class Menu extends Component {
  render() {
    return (
      
        
          {menuList.MENU_LIST.map(item => (
             console.log('entered menu')}
            >
              {item.name}
            
          ))}
        
      
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#33cc33',
    marginTop: 50,

  },

  listMenu: {
    color: 'white', 
    fontSize: 16, 
    paddingLeft: 20, 
    paddingTop: 12,
    paddingBottom: 12,
  }

});

And the result like :

---

UPDATE-2 :

based on your case in the comments, if you want to change position menu to the right. You must change position the drawer first.

Actually :

• i set drawer half the screen and postion in the left. You can see in main file like :

 render() {
    return (
       {
          this.DRAWER = drawerElement;
        }}

        /* This for set position drawer */

        drawerPosition={DrawerLayout.positions.left}

        /* end */

        onDrawerOpen={this.setDrawerState}
        onDrawerClose={this.setDrawerState}
        renderNavigationView={() => }
      >
        

      
    );
  }

Hopelly :

• i set the menu options on the right. You just change position drawer like :

 render() {
    return (
       {
          this.DRAWER = drawerElement;
        }}
        
        // i change the position to the right.
        drawerPosition={DrawerLayout.positions.Right}
        
        onDrawerOpen={this.setDrawerState}
        onDrawerClose={this.setDrawerState}
        renderNavigationView={() => }
      >
        

      
    );
  }

if you want to learn about DrawerLayout on Android you can read the documentation.

• API DrawerLayoutAndroid

for the case, my emulator showing like :

---

I hope my answer can to help you and give your another idea to develop your apps. fighting... ;))