concept actionsheetios in category react native

This is an excerpt from Manning's book React Native in Action. Login to get full access to this book.

ActionSheetIOS allows you to access the native iOS UIAlertController to show a native iOS action sheet or share sheet (see figure 10.7).

Figure 10.7 ActionSheetIOS rendering an action sheet (left) and a share sheet (right)

The two main methods that you can call on ActionSheetIOS are showActionSheetWithOptions and showShareActionSheetWithOptions; these methods have the options listed in tables 10.6 and 10.7, respectively. showActionSheetWithOptions lets you pass an array of buttons and attach methods to each of the buttons. It’s called with two arguments: an options object and a callback function. showShareActionSheetWithOptions displays the native iOS share sheet, passing in a URL, message, and subject to share. It’s called with three arguments: an options object, a failure callback function, and a success callback function.

Table 10.6 ActionSheetIOS showActionSheetWithOptions options

Option	Type	Description
options	Array of strings	List of button titles (required)
cancelButtonIndex	Integer	Index of the Cancel button in options
destructiveButtonIndex	Integer	Index of the Destructive button in options
title	String	Title to show above the action sheet
message	String	Message to show below the title

Table 10.7 ActionSheetIOS showShareActionSheetWithOptions options

Option	Type	Description
url	String	URL to share
message	String	Message to share
subject	String	Subject for the message
excludedActivityTypes	Array	Activities to exclude from the action sheet

Listing 10.13 Using ActionSheetIOS to create action sheets and share sheets

import React, { Component } from 'react'
import { Text, View, ActionSheetIOS, 
         TouchableHighlight } from 'react-native'    #1  

const BUTTONS = ['Cancel', 'Button One', 'Button Two', 'Button Three']    #2  

class App extends Component {
  constructor() {
    super()
    this.state = {    #3  
      clicked: null    #3  
    }
    this.showActionSheet = this.showActionSheet.bind(this)
    this.showShareActionSheetWithOptions =
        this.showShareActionSheetWithOptions.bind(this)
  }

  showActionSheet() {    #4  
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: 0,
    },
    (buttonIndex) => {
      if (buttonIndex > 0) {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      }
    });
  }

  showShareActionSheetWithOptions() {    #5  
    ActionSheetIOS.showShareActionSheetWithOptions({
      url: 'http://www.reactnative.training',
      message: 'React Native Training',
    },
    (error) => console.log('error:', error),
    (success, method) => {    #6  
      if (success) {
        console.log('successfully shared!', success)
      }
    });
  };
  render() {
    return (
      <View style={styles.container}>    #7  
        <TouchableHighlight onPress={this.showActionSheet}
                            style={styles.button}>    #7  
          <Text style={styles.buttonText}>    #7  
             Show ActionSheet    #7  
          </Text>    #7  
        </TouchableHighlight>    #7  
        <TouchableHighlight onPress={this.showShareActionSheetWithOptions}
                            style={styles.button}>    #7  
          <Text style={styles.buttonText}>    #7  
             Show ActionSheet With Options    #7  
          </Text>    #7  
        </TouchableHighlight>
        <Text>
          {this.state.clicked}
        </Text>
      </View>
    )
  }
}

styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  button: {
    height: 50,
    marginBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  buttonText: {
    color: 'white'
  }
}

#1   Imports ActionSheetIOS from React Native
#2   Creates an array of buttons to use in the action sheet
#3   Creates a variable clicked and sets it to null
#4   Creates a showActionSheet method
#5   Creates a showShareActionSheetWithOptions method
#6   The success callback takes a Boolean signifying success or failure, and a string that indicates the method of sharing.
#7   Creates two buttons in the view, and attaches the showActionSheet and showShareActionSheetWithOptions to them

copy