
Exploring Alternative Emulators for React Native Development
January 20, 2024
1 min
This is an Example to make React Native Bottom Action Menu. To make Bottom Action Menu, we are going to use ActionSheet component from react-native-actionsheet library.
This can be mostly seen by the IOS developers as it looks like a default select option in IOS. With the help of Bottom Action Menu, you can provide the facility to select from multiple options.
npm install react-native-actionsheet --save
import React, { useRef } from 'react';// import all the components we are going to useimport {SafeAreaView,StyleSheet,View,TouchableHighlight,Text,} from 'react-native';// import ActionSheetimport ActionSheet from 'react-native-actionsheet';const App = () => {let actionSheet = useRef();var optionArray = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Cancel'];const showActionSheet = () => {//To show the Bottom ActionSheetactionSheet.current.show();};return (<SafeAreaView style={styles.container}><View style={styles.container}><TouchableHighlightstyle={styles.buttonStyle}onPress={showActionSheet}><Text style={styles.buttonTextStyle}>Open Buttom ActionSheet</Text></TouchableHighlight><ActionSheetuseNativeDriver="true"ref={actionSheet}// Title of the Bottom Sheettitle={'Which one do you like ?'}// Options Array to show in bottom sheetoptions={optionArray}// Define cancel button index in the option array// This will take the cancel option in bottom// and will highlight itcancelButtonIndex={4}// Highlight any specific optiondestructiveButtonIndex={1}onPress={(index) => {// Clicking on the option will give you alertalert(optionArray[index]);}}/></View></SafeAreaView>);};export default App;const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignContent: 'center',textAlign: 'center',paddingTop: 30,backgroundColor: '#307ecc',padding: 16,},buttonStyle: {width: '100%',height: 40,padding: 10,backgroundColor: '#f5821f',marginTop: 30,},buttonTextStyle: {color: 'white',textAlign: 'center',},});
Coming Soon…
Quick Links
Legal Stuff