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 | | |