HomeOur TeamContact

Action Sheet

By Utkarsh Lubal
Published in Others
August 11, 2022
1 min read
Action Sheet

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way of drawing it on the different platforms (iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS. For custom ActionSheet it uses different styles depending on the platform.

Props

<table>
    <tr>
        <th>Prop name</th>
        <th>Desciption</th>
        <th>Type</th>
        <th>Default</th>
    </tr>
    <tr>
        <td>title</td>
        <td></td>
        <td>PropTypes.string or PropTypes.element</td>
        <td></td>
    </tr>
    <tr>
        <td>message</td>
        <td></td>
        <td>PropTypes.string or PropTypes.element</td>
        <td></td>
    </tr>
    <tr>
        <td>options</td>
        <td></td>
        <td>
          PropTypes.arrayOf([
            PropTypes.string,
            PropTypes.shape({
              component: PropTypes.element,
              height: PropTypes.number
            }),
          ])
        </td>
        <td></td>
    </tr>
    <tr>
        <td>tintColor</td>
        <td></td>
        <td>PropTypes.string</td>
        <td></td>
    </tr>
    <tr>
        <td>cancelButtonIndex</td>
        <td></td>
        <td>PropTypes.number</td>
        <td></td>
    </tr>
    <tr>
        <td>destructiveButtonIndex</td>
        <td></td>
        <td>PropTypes.number</td>
        <td></td>
    </tr>
    <tr>
        <td>onPress</td>
        <td></td>
        <td>PropTypes.func</td>
        <td>(index) => {}</td>
    </tr>
    <tr>
        <td>styles</td>
        <td></td>
        <td>StyleSheet object with some keys from ./lib/styles</td>
        <td></td>
    </tr>
</table>

Installation

npm i react-native-custom-actionsheet --save

Example


import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { ActionSheetCustom as ActionSheet } from 'react-native-custom-actionsheet'

const CANCEL_INDEX = 0
const DESTRUCTIVE_INDEX = 4
const options = [
  'Cancel',
  'Apple',
  {
    component: <Text style={{ color: 'orange', fontSize: 24 }}>Banana</Text>,
    height: 80,
  },
  'Watermelon',
  {
    component: <Text style={{ color: 'blueviolet' }}>Apple</Text>,
    height: 40,
  },
]
const title = <Text style={{ color: 'crimson', fontSize: 18 }}>Which one do you like?</Text>

class CustomExample extends Component {
  state = {
    selected: 1,
  }

  showActionSheet = () => this.actionSheet.show()

  getActionSheetRef = ref => (this.actionSheet = ref)

  handlePress = index => this.setState({ selected: index })

  render() {
    const { selected } = this.state
    const selectedText = options[selected].component || options[selected]

    return (
      <View style={{flex:1, justifyContent: 'center',alignItems:'center'}}>
        <Text style={{ marginBottom: 20 }}>
          I like {selectedText}
        </Text>
        <Text style={{  alignItems: 'center',
                        justifyContent: 'center',
                        paddingVertical: 12,
                        paddingHorizontal: 32,
                        borderRadius: 20,
                        backgroundColor: 'lightblue', }} 
        onPress={this.showActionSheet}> ActionSheet </Text>
        <ActionSheet
          ref={this.getActionSheetRef}
          title={title}
          message="custom message custom message custom message custom message custom message custom message "
          options={options}
          cancelButtonIndex={CANCEL_INDEX}
          destructiveButtonIndex={DESTRUCTIVE_INDEX}
          onPress={this.handlePress}
        />
      </View>
    )
  }
}

export default CustomExample;

Tutorial

Coming Soon…


Previous Article
User Avatar
Next Article
Date Picker
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Exploring Alternative Emulators for React Native Development
Exploring Alternative Emulators for React Native Development
January 20, 2024
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media