1.2.1 • Published 4 years ago

@msco/react-native-action-sheet v1.2.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

react-native-action-sheet

ActionSheet for both Android and iOS.

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

npm.io

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 nameDescriptionTypeRequired
colorheader background colorstring (HEX value)false
textColorheader text colorstring (HEX value)false
cancelablecan be closed by taping outside: truebooleanfalse

ActionSheet.showShareActionSheetWithOptions

Prop nameDescriptionTypeRequired
dialogTitleAndroid chooser dialog textstringfalse
includedActivityTypesWhitelist activities to showstring[]false