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>

Published On October 14, 2020 12:27 PM

Last Updated October 14, 2020 12:27 PM