react-native-action-sheet-component

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
hideOnSelceted?	boolean	true
hideOnHardwareBackPress?	boolean	true
showSparator?	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