ActionSheet
Action sheet is normally used to allow user to choose a action from a list of actions. We allow both native and our customly designed action sheets to choose from.
You can either call Actionsheet Programmatically or use it as a component.
Usage
There are 2 ways to use actionsheet.
- As a component
- Call via static methods
As a component
Below are few examples of the usage of this component. For full working demos, Please refer under js/core/components/actionsheet/demo
//Data for Actionsheet Demo
this.data = [
{
title: 'Operation 1',
action: ()=> {
Toast.success("Action - Success");
},
{
title: 'Cancel',
action: ()=> {
Toast.success("Action - Cancel");
}
]
Native Action Sheet (Normal)
import {ActionSheet} from 'arivaa-basic';
<ActionSheet
title="This is Title"
url="http://www.google.com"
message="Testing New Message"
triggerProps={{
text: 'Default Trigger'
}}
options={this.data}
native={true}
/>
Custom Action Sheet (Normal)
import {ActionSheet} from 'arivaa-basic';
<ActionSheet
title="This is Title"
message="Testing New Message"
triggerProps={{
text: 'Default Trigger'
}}
options={this.data}
native={false}
/>
Native Action Sheet (Share)
import {ActionSheet} from 'arivaa-basic';
<ActionSheet
title="This is Title"
message="Testing New Message"
triggerProps={{
text: 'Default Trigger'
}}
type="share"
onSuccess={() => {
Toast.success('Share Success')
}}
options={this.data}
native={true}
/>
Custom Action Sheet (Share)
import {ActionSheet} from 'arivaa-basic';
<ActionSheet
title="This is Title"
message="Testing New Message"
url="http://www.google.com"
triggerProps={{
text: 'Default Trigger'
}}
type="share"
onSuccess={() => {
Toast.success('Share Success')
}}
options={this.data}
native={false}
/>
Custom Action Sheet using custom trigger
import {ActionSheet} from 'arivaa-basic';
<ActionSheet
title="This is Title"
url="http://www.google.com"
message="Testing New Message"
triggerProps={{
text: 'Default Trigger'
}}
trigger={
<View>
<Icon type="ionicons" name='ios-list-box-outline'/>
</View>
}
options={this.data}
native={true}
/>
Via static methods
Calling like this is very similar to using as a component. In this case, A config object is passed to the functions which has the same format as the props in case of using as a component.
Normal Actionsheet
import {ActionSheet} from 'arivaa-basic';
// Config Object is same as props in case of use via component
ActionSheet.showActionSheetWithOptions({
title : "This is Title",
message : "Testing New Message",
triggerProps={
text: 'Custom Trigger Text'
},
options : this.data,
native : true
});
Share Actionsheet
import {ActionSheet} from 'arivaa-basic';
// Config Object is same as props in case of use via component
ActionSheet.showShareActionSheetWithOptions({
title : "This is Title",
url : "http://www.google.com",
message : "Testing New Message",
triggerProps={
text: 'Custom Trigger Text'
},
options : this.data,
native : false
});
Important Note : Usage inside a Modal
Whenever using this component inside a modal, It needs to be used as a component and not via static method since the view of the action sheet comes behind the modal when dynamically inserted because in react native a Modal comes on top of every view in normal view structure.
Use Actionsheet as a component and pass it as secondaryContent in props to the modal.
import {Modal,Button,ActionSheetComponent} from "arivaa-basic";
import {View} from "react-native";
<Modal
visible = {this.state.visible}
content={(
<View>
<Button
type="bordered"
text="Open Action Sheet Via Component"
onPress={() => {
this.actionsheet.showShareActionSheetWithOptions({
title: 'This is Title',
message: 'Testing New Message',
options: this.data
native: false
})
}}
/>
</View>
)}
secondaryContent ={<ActionSheetComponent ref={(ref) => this.actionsheet = ref}/>}
>
<Button
type="bordered"
text="Check Action Sheet in Modal"
/>
</Modal>
Supported properties
Note : Properties marked as Native share are only applicable when native actionsheet is used for sharing i,e native = true and type=share
Properties | Description | Applicable for (Native or Custom Actionsheet) | Type | Default |
---|---|---|---|---|
title | Title of the actionsheet | Both | String | Empty |
message | message to be shown in the action sheet | Both | String | Empty |
options | Array of options to be shown | Both | Array | [] |
type | Type of actionsheet - Normal or share | Both | String | normal |
native | Whether native actionsheet is to be used or not | Both | Boolean | false |
url | Url to be shared | Native Share | String | Null |
onSuccess | On Success of share | Native share | On Successful share | Null |
onError | On Error of share | Native share | On Successful share | Null |
onShow | On Show of actionsheet | Custom Normal | Function | - |
onHide | On Hide of actionsheet | Custom Normal | Function | - |
cancelButtonIndex | Index of the button which should be used as cancel button | Native | Number | Last Option Index |
destructiveButtonIndex | Index of the button which should be used as destroy button | Native | Number | Second Last Option Index |
triggerProps | Props to be passed to the default button trigger( Not applicable in case of custom trigger ) | Both | Button Props | - |
trigger | Custom Trigger for Actionsheet | Both | Valid React Element | - |
overlayOpacity | Opacity of the overlay behind action sheet | Custom | Number (0-1) | 0.8 |
styles | For detailed customization of component's internal styles. | Custom | Object( DetailedStyles ) (Refer the format below) | Null |
OptionItem Object Format
Property Name | Description | Applicable for (Native or Custom Actionsheet) | Type | Required | Default |
---|---|---|---|---|---|
text | Text of the option | Both | String | No | Index of the item in array |
icon | Icon name to be used | Custom | String | No | Null |
action | Callback when specific action is clicked | Both | String | No | Null |
image | URL of Image is to be used instead of icon | Custom | String | No | Null |
style | Styles for action button container | Custom | React Native View Styles | No | Null |
textStyle | Styles for text in action button | Custom | React Native Text Styles | No | Null |
styles | For detailed customization of option's internal styles. | Custom | Object( OptionStyles ) (Refer the format below) | Object( OptionStyles ) (Refer the format below) | Null |
component | Component To be used for rendering option | Custom | React Element | No |
DetailedStyles Usage
Below is the tree structure of React Native's core elements and how detailed styles property is applied when this component is rendered. So feel free to customize it if you need to.
<View style={styles.mainContainer}>
<AnimatedOverlay/>
<Animated.View style={styles.customActionSheetView}>
<ScrollView style={styles.scrollViewStyle}>
<View style={styles.itemsContainer}>
<View style={propStyles.actionSheetHeaderText}>
<Text style={styles.actionSheetHeaderTitle}>
{/*Title of actionsheet*/}
</Text>
<Text style={styles.actionSheetHeaderMessage}>
{/*Message of actionsheet*/}
</Text>
</View>
<View style = {[propStyles.itemsStyle]}>
{/*Action Sheet Options*/}
</View>
</View>
</ScrollView>
</Animated.View>
</View>
OptionStyles Usage
Below is the tree structure of React Native's core elements used in this component's view implementation and how option styles are applied when this component is rendered. So feel free to customize it if you need to.
<TouchableHighlight style={styles.itemTouchableContainer}>
<View style={[styles.itemContainer, style]}>
<View style={styles.itemContent}>
{/*Option Icon Component*/}
<Text style={[styles.itemText, textStyle]}>
{/*Option Text*/}
</Text>
</View>
</View>
</TouchableHighlight>