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
Preview
Installation
yarn
yarn add react-native-action-sheet-component
npm
npm install --save react-native-action-sheet-component
ActionSheetManager
Usage with 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'); });
ActionSheet
Usage with 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 |