Skip to content

jacklam718/react-native-action-sheet-component

Repository files navigation

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