@msco/react-native-action-sheet

react-native-action-sheet

ActionSheet for both Android and iOS.

• Mimics ActionSheetIOS interface
• Native Android implementation on BottomSheetDialog
• iOS zero dependency (rely on ActionSheetIOS)

Installation

yarn add react-native-action-sheet

Linking

Automatic

react-native link react-native-action-sheet

Manual

iOS integration

Nothings here. It uses ActionSheetIOS. Replace your imports of ActionSheetIOS to import ActionSheet from "react-native-action-sheet"

Android integration

settings.gradle

include ':react-native-action-sheet'
project(':react-native-action-sheet').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-action-sheet/android')

app.gradle

dependencies {
    ...
    implementation project(':react-native-action-sheet')
}

Native App

override fun getPackages(): List<ReactPackage> {
    return Arrays.asList(
            MainReactPackage(),
            ActionSheetPackage()
    )
}

Usage

React Native

ActionSheet

import ActionSheet from 'react-native-action-sheet'
...
ActionSheet.showActionSheetWithOptions(
    {
      options: ['Cancel', 'Choose from library', 'Take photo', 'Delete'],
      cancelButtonIndex: 0,
      destructiveButtonIndex: 3,
      title: 'Change profile photo',
      message: 'Please choose your best ever photo',
      android: {
          header: {
              color: '#BAFF94',
              textColor: '#5A5959'
          }
      }
    },
    buttonIndex => {...}
  )

Sharing dialog

import ActionSheet from 'react-native-action-sheet'
...
ActionSheet.showShareActionSheetWithOptions(
  {
    url: 'https://www.google.com',
    subject: 'Your search engine',
    message: "It's popular",
    excludedActivityTypes: ['com.android.bluetooth'],
    android: {
      dialogTitle: 'Share with',
      includedActivityTypes: [
        // 'com.facebook.katana',
        // 'com.ghisler.android.TotalCommander'
      ]
    }
  },
  () => {}, //Failure callback
  () => {}  //Success callback
)

Props

Refer to ActionSheetIOS

Android only props passed under android props key

ActionSheet.showActionSheetWithOptions

Prop name	Description	Type	Required
color	header background color	string (HEX value)	false
textColor	header text color	string (HEX value)	false
cancelable	can be closed by taping outside: true	boolean	false

ActionSheet.showShareActionSheetWithOptions

Prop name	Description	Type	Required
dialogTitle	Android chooser dialog text	string	false
includedActivityTypes	Whitelist activities to show	string[]	false