react-native-context-menu-strip
A ContextMenuStrip component for react-native, Inspired from react-native-action-button
Installation
npm i react-native-context-menu-strip --save
Usage
ContextMenuStrip
ContextMenuStrip
component is the main component.
props
prop | default | type | description |
---|---|---|---|
autoInactive | true | boolean | Auto hide ContextMenu when ContextMenuStrip.Item is pressed |
width | 60 | number | width of menu button |
height | 48 | number | height of menu button |
circleRadius | 40 | number | radius of circle which wrap '+' icon |
itemWidth | 150 | number | width of item button |
itemHeight | 38 | number | height of item button |
itemType | 'highlight' | 'opacity' or 'highlight' | type of item button |
itemBgColor | 'transparent' | string | backgroundColor of item |
itemUnderlayColor | '#F8F7F7' | string | underlayColor of item |
btnUnderlayColor | '#F8F7F7' | string | underlayColor of menu's main button |
btnColor | 'transparent' | string | backgroundColor of menu's main button, (must be rgba value!) |
btnColorRange | undefined | string | backgroundColor of menu's main button when menu opened, (must be rgba value!) |
degrees | 135 | number | degrees to rotate icon when menu opened |
scaleRange | undefined | number | scale to resize menu's main button |
menuBorderColor | '#D5D5D5' | string | borderColor of menu |
menuMarginRight | 0 | number | marginRight of menu items |
menuMarginTop | 0 | number | marginTop of menu items |
icon | undefined | component | '+' icon |
onPress | () = {} | function | callback when menu's main button is pressed |
onReset | undefined | function | callback when menu reset |
ContextMenuStrip.Item
ContextMenuStrip.Item
specifies a menu Button.
props
prop | default | type | description |
---|---|---|---|
customized | false | boolean | when customize === false, you need to specify icon and label, when customize === false, you need to specify a child component. |
btnColor | undefined | string | background color of item button |
onPress | undefined | function | callback when item button is pressed |
iconSize | 20 | number | radius of icon on item button |
itemWidth | 150 | number | width of item button |
iconName | undefined | number or string | source of Image component or iconName of react-native-vector-icon's component |
iconType | undefined | PropTypes.oneOf(['Zocial', 'Octicons', 'MaterialIcons', 'Ionicons', 'Foundation', 'EvilIcons', 'Entypo', 'FontAwesome', 'Image']) | type of icon |
label | undefined | string | label on item button |
Example
The following example can be found in example
.
;; contextMenuStrip { superprops thisstate = menuActive: false } { this } { BackAndroid } { BackAndroid } { if thisstatemenuActive this thiscontextMenuStrip return true // navigator // finally return false } { return <ContextMenuStrip ref= thiscontextMenuStrip = c width=60 height=PlatformOS === 'ios' ? 40 : 48 itemWidth=150 itemHeight=38 btnSize=40 degrees=135 scaleRange=15 btnColorRange="rgba(88,66,77,0.8)" menuMarginRight=10 onPress= this onReset= this> /*Icon*/ <ContextMenuStripItem iconType="FontAwesome" iconName="comments" label="chat" onPress= {} /> <ContextMenuStripItem iconType="FontAwesome" iconName="gear" label="setting" onPress= {} /> <ContextMenuStripItem iconType="FontAwesome" iconName="refresh" label="refresh" onPress= {} /> /*Image Icon*/ <ContextMenuStripItem iconType="Image" iconName= label="about" onPress= {} /> /*Customize*/ <ContextMenuStripItem customized=true onPress= {}> <View style= flex: 1 flexDirection: 'row' justifyContent: 'flex-start' alignItems: 'center' > <View style= width: 45 flexDirection: 'row' justifyContent: 'center' alignItems: 'center' > <Image style= width: 20 height: 20 flexDirection: 'row' justifyContent: 'center' alignItems: 'center' marginLeft: 5 source= /> </View> <Text style= flexDirection: 'row' justifyContent: 'center' alignItems: 'center' marginLeft: 5 > Come on </Text> </View> </ContextMenuStripItem> </ContextMenuStrip> } AppRegistry