react-native-action-sheet-component
v0.0.36
Published
React Native Action Sheet Component for iOS & Android.
Downloads
200
Readme
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
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
| | |