React Native Action Sheet Component

React Native Action Sheet Component for iOS & Android.

Pull request are welcomed. Please follow the Airbnb style guide Airbnb JavaScript

Try it with Exponent

Preview

Installation

yarn

yarn add react-native-action-sheet-component

npm

npm install --save react-native-action-sheet-component

Usage with ActionSheetManager

import { EvilIcons, Ionicons } from '@exponent/vector-icons';
import ActionSheetManager { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';

Options

const actionSheetItems = [
  <ActionSheetItem
    key='item-1'
    text="Github"
    value="github"
    selectedIcon={checkedIcon}
    icon={
      <EvilIcons name="sc-github" size={42} />
    }
    onPress={this.onItemPress}
  />,
  <ActionSheetItem
    key='item-2'
    text="Facebook"
    value="facebook"
    selectedIcon={checkedIcon}
    icon={
      <EvilIcons name="sc-facebook" color="#4363A2" size={42} />
    }
    onPress={this.onItemPress}
  />,
];

const options = {
  defaultValue: ['github'],
  children: actionSheetItems,
  onChange: (value, index, selectedData) => {
  },
}

Show

ActionSheetManager.show(options, () => {
  console.log('callback');
});

Update

ActionSheetManager.update(options, () => {
  console.log('callback');
});

Hide

ActionSheetManager.hide(() => {
  console.log('callback');
});

Usage with ActionSheet

import { EvilIcons, Ionicons } from '@exponent/vector-icons';
import { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';

class Example extends Component {
  constructor(props) {
    super(props) {

      this.state = {
        defaultSelectedValues: ['github'],
      }
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <ActionSheet
          ref={(actionSheet) => { this.topActionSheet = actionSheet; }}
          position="top"
          onChange={this.onChange}
          defaultValue={this.state.defaultSelectedValues}
          multiple
        >
          <ActionSheetItem
            text="Github"
            value="github"
            selectedIcon={checkedIcon}
            icon={
              <EvilIcons name="sc-github" size={42} />
            }
            onPress={this.onItemPress}
          />
          <ActionSheetItem
            text="Facebook"
            value="facebook"
            selectedIcon={checkedIcon}
            icon={
              <EvilIcons name="sc-facebook" color="#4363A2" size={42} />
            }
            onPress={this.onItemPress}
          />
        </ActionSheet>
      </View>
    )
  }
}

Show

actionSheet.show(() => {
  console.log('callback - show');
})

Hide

actionSheet.hide(() => {
  console.log('callback - hide');
})

Props

ActionSheet

Prop	Type	Default	Note
value?	any	null
defaultValue?	any	null
onShow?	Function	() => {}
onHide?	Function	() => {}
style?	any	null
onChange?	Function	() => {}
show?	boolean	false
showSelectedIcon?	boolean	true
multiple?	boolean	false
hideOnSelected?	boolean	true
hideOnSelceted? DEPRECATED	boolean	true
hideOnHardwareBackPress?	boolean	true
showSeparator?	boolean	true
showSparator? DEPRECATED	boolean	true
scrollEnabled?	boolean	true
animationDuration?	number	250
overlayOpacity?	number	0.3
position?	string	top
maxHeight?	number	Dimensions.get('window').height / 2
children?	any	null

ActionSheetItem

Prop	Type	Default	Note
text	any	null
icon?	any	null
index?	number	null
selectedIcon?	number	require('./img/checkmark.png')
selected?	boolean	false
showSelectedIcon?	boolean	true
onPress?	Function	() => {}
style?	any	null
textStyle?	any	null