React Native Bottom Action Menu Example

This tutorial explains how to create bottom action menu example in react native application. To make Bottom Action Menu, we are going to use ActionSheet component from react-native-actionsheet library. Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.

Installation of Dependency

To use Bottom Action Menu, we need to use react-native-actionsheet library in our project directory first.

npm install react-native-actionsheet --save

Complete Source Code for App.js 

Lets see the complete source code that helps to create bottom action menu example in react native application with simple example.

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import ActionSheet from 'react-native-actionsheet';

export default class App extends Component {

  showActionSheet = () => {
    //To show the Bottom ActionSheet
    this.ActionSheet.show();
  };

  render() {
    //Options to show in bottom action sheet. 
    var optionArray = [
      'Option 1',
      'Option 2',
      'Option 3',
      'Option 4',
      'Cancel',
    ];

    return (
      <View style={styles.container} >
        <Button
          onPress={this.showActionSheet}
          title="Open Buttom ActionSheet"
        />
        <ActionSheet
          ref={o => (this.ActionSheet = o)}
          //Title of the Bottom Sheet
          title={'Which one do you like most ?'}
          //Options Array to show in bottom sheet
          options={optionArray}
          //Define cancel button index in the option array
          //this will take the cancel option in bottom and will highlight it
          cancelButtonIndex={4}
          //If you want to highlight any specific option you can use below prop
          destructiveButtonIndex={1}
          onPress={index => {
            //Clicking on the option will give you the index of the option clicked
            alert(optionArray[index]);
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    
  });

Screenshot :

This is all about React Native Bottom Action Menu Example. 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.