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.
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.
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.
No comments:
Post a Comment