A highly customizable cross platform ActionSheet for react native.
❶ Native Animations & Performance ❷ Cross Platform (iOS and Android) ❸ Identical Working on Android and iOS ❹ Gesture Control ❺ Raw ActionSheet - You can Add Anything ❻ Allow ActionSheet to be partially shown when opened ➐ Support TextInputs ❽ Cool bounce effect on open.
To run the example app clone the projectgit clone https://github.com/ammarahm-ed/react-native-actions-sheet.git
then run yarn or npm install
in the example folder and finally to run the example app:
react-native run-android
npm install react-native-actions-sheet --save
or if you use yarn:
yarn add react-native-actions-sheet
<View
style={{
justifyContent: 'center',
flex: 1,
}}>
<TouchableOpacity
onPress={() => {
actionSheet.setModalVisible();
}}>
<Text>
Open ActionSheet
</Text>
</TouchableOpacity>
<ActionSheet
ref={ref => (actionSheet = ref)}
children={YOUR CUSTOM COMPONENT INSIDE THE ACTIONSHEET}
/>
</View>
Assigns a ref to ActionSheet component to use methods.
Type | Required |
---|---|
ref | Yes |
Renders a custom component inside the ActionSheet.
Type | Required |
---|---|
React.Component | Yes |
Default: An Empty<View/>
<ActionSheet
children={<View/>}
/>
You can also wrap your component in ActionSheet like this:
<ActionSheet>
<View/>
</ActionSheet>
Use if you want to show the ActionSheet Partially on Opening. Requires gestureEnabled=true
Type | Required |
---|---|
boolean | no |
Default:1
Normally when the ActionSheet is fully opened, a small portion from the bottom is hidden by default. Use this prop if you want the ActionSheet to hover over the bottom of screen and not hide a little behind it.
Type | Required |
---|---|
number | no |
Default:0
Any custom styles for the container.
Type | Required |
---|---|
Object | no |
Your custom header component. Using this will hide the default indicator.
Type | Required |
---|---|
React.Component | no |
Keep the header always visible even when gestures are disabled.
Type | Required |
---|---|
boolean | no |
Default: false
A footer component if you want to add some info at the bottom.
Type | Required |
---|---|
React.Component | no |
Note: Remember to give footer a fixed height and provide ActionSheet the footerHeight
prop with same value. If you have added margins etc, add those values to footerHeight
also.
Height of the footer
Type | Required |
---|---|
number | no |
Default: 80 |
Custom Styles for the footer container.
Type | Required |
---|---|
Object | no |
Keep footer visible. Currently when you overdraw, the footer appears, however you can change this by setting this to true
.
Type | Required |
---|---|
boolean | no |
Default: false
Keep footer visible. Currently when you overdraw, the footer appears, however you can change this by setting this to true
.
Type | Required |
---|---|
boolean | no |
Default: true
Duration of opening animation.
Type | Required |
---|---|
number | no |
Default: 200
Duration of closing animation.
Type | Required |
---|---|
number | no |
Default: 300
Enables gesture control of ActionSheet
Type | Required |
---|---|
boolean | no |
Default: false
Bounces the ActionSheet on open.
Type | Required |
---|---|
boolean | no |
Default: false
How much you want the ActionSheet to bounce when it is opened.
Type | Required |
---|---|
number | no |
Default: 8
When touch ends and user has not moved farther from the set springOffset, the ActionSheet will return to previous position.
Type | Required |
---|---|
number | no |
Default: 50
Add elevation to the ActionSheet container.
Type | Required |
---|---|
number | no |
Default: 0
Color of the gestureEnabled Indicator.
Type | Required |
---|---|
string | no |
Default: "#f0f0f0"
Color of the overlay/backdrop.
Type | Required |
---|---|
string | no |
Default: "black"
Default opacity of the overlay/backdrop.
Type | Required |
---|---|
number 0 - 1 | no |
Default: 0.3
Will the ActionSheet close on hardwareBackPress
event.
Type | Required |
---|---|
boolean | no |
Default: true
Event called when the ActionSheet closes.
Type | Required |
---|---|
function | no |
An event called when the ActionSheet Opens.
Type | Required |
---|---|
function | no |
Methods require you to set a ref on ActionSheet Component.
ActionSheet can be opened or closed using its ref.
// First create a ref on your <ActionSheet/> Component.
<ActionSheet
ref={ref => this.actionSheet = ref}
/>
// then later in your function to open the ActionSheet:
this.actionSheet.setModalVisible();
Support it by joining stargazers for this repository. ⭐️ and follow me for my next creations!