Creating Action Sheet in React Native

January 30, 2021

While developing Griffin, I had to create an action-sheet to let users update Job Application Status with a single click. So I tested various npm modules, none of them filled the spot except react-native-actions-sheet. This module provides a fully customizable action sheet with an elegant bounce animation.

What is an Actionsheet anyway?
Actionsheet is a menu that pops from the bottom of the screen on pressing a button.

Why react-native-actions-sheet anyway?

It provides a blank menu that is 100% customizable.

Built-In fully configurable animations.

Cross-Platform.

Action sheet can be controlled with gestures.

Supports Textinput and ScrollView.

Now let's see how to use this awesome module!

In your project root directory run

npm i react-native-actions-sheet --save
OR
yarn add react-native-actions-sheet

Now add the below code!

import React, { createRef } from "react";
import { StyleSheet, Text, View, Button } from 'react-native';
import ActionSheet from "react-native-actions-sheet";

const actionSheetRef = createRef();

// This Menu component is fully customizable. Add whatever you want!!
const Menu = () => (
    <View style={styles.drawerContent} >
		<Text>Hello There</Text>
		<Text>General Kenobi</Text>
	</View>
)

export default function App() {
  	return (
    	<View style={styles.container}>
			<Button onPress={() => {
                actionSheetRef.current?.setModalVisible();
            }} title="Toggle Actionsheet" />
			<ActionSheet ref={actionSheetRef} containerStyle={{borderTopLeftRadius: 25, borderTopRightRadius: 25,borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}>
                <Menu />
            </ActionSheet>
    	</View>
  	);
}

const styles = StyleSheet.create({
	container: {
    	flex: 1,
    	backgroundColor: '#fff',
    	alignItems: 'center',
    	justifyContent: 'center',
	},
	drawerContent: {
		padding: 10,
		paddingHorizontal: 10,
		minHeight: 100
    }
});

View on GitHub →

After importing the npm module, we have created an actionSheetRef that can be used to toggle the action sheet. Now inside the ActionSheet component add your custom Menu Component. Here I have created a simple Menu component that can be overwritten by your custom component.

Creating Actionsheet with react-native-actions-sheet is that easy!

import React, { createRef } from "react"; import { StyleSheet, Text, View, Button } from 'react-native'; import ActionSheet from "react-native-actions-sheet"; const actionSheetRef = createRef(); // This Menu component is fully customizable. Add whatever you want!! const Menu = () => ( <View style={styles.drawerContent} > <Text>Hello There</Text> <Text>General Kenobi</Text> </View> ) export default function App() { return ( <View style={styles.container}> <Button onPress={() => { actionSheetRef.current?.setModalVisible(); }} title="Toggle Actionsheet" /> <ActionSheet ref={actionSheetRef} containerStyle={{borderTopLeftRadius: 25, borderTopRightRadius: 25,borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}> <Menu /> </ActionSheet> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, drawerContent: { padding: 10, paddingHorizontal: 10, minHeight: 100 } });