0.0.36 • Published 6 years ago
react-native-action-sheet-component v0.0.36
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 |
0.0.36
6 years ago
0.0.34
7 years ago
0.0.33
7 years ago
0.0.32
7 years ago
0.0.31
7 years ago
0.0.30
7 years ago
0.0.29
7 years ago
0.0.28
7 years ago
0.0.27
7 years ago
0.0.26
7 years ago
0.0.25
7 years ago
0.0.24
7 years ago
0.0.23
7 years ago
0.0.22
7 years ago
0.0.21
7 years ago
0.0.20
7 years ago
0.0.19
7 years ago
0.0.18
7 years ago
0.0.17
7 years ago
0.0.16
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago