Creating Action Sheet in React Native
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?
1.) It provides a blank menu that is 100% customizable.
2.) Built-In fully configurable animations.
3.) Cross-Platform.
4.) Action sheet can be controlled with gestures
5.) 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-sheetNow add the below code!
After importing the npm module, we have created an actionSheetRef that can be used to toggle the actionsheet. 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!
Searching for a freelancer for your next Big App?
Drop a mail at contact.jaiparakh@gmail.com
Do check out this application, I developed in React Native. It helps in tracking Job Applications. You can filter applications by categories and even change them with a single click!!
