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.

1. As a component
2. 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>