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

import ContextMenuStrip from 'react-native-context-menu-strip'

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.

import React, { Component } from 'react';
import {
  AppRegistry,
  BackAndroid,
  Platform,
  Text,
  View,
  Image,
} from 'react-native';
import ContextMenuStrip from 'react-native-context-menu-strip'

class example extends Component {
  contextMenuStrip

  constructor (props) {
    super(props)
    this.state = {
      menuActive: false,
    }
  }

  onMenuToggled (expand) {
    this.setState({menuActive: expand})
  }

  componentDidMount () {
    BackAndroid.addEventListener('hardwareBackPress', () => this.handleBackButton())
  }

  componentWillUnmount () {
    BackAndroid.removeEventListener('hardwareBackPress', () => this.handleBackButton())
  }

  handleBackButton () {
    if (this.state.menuActive) {
      this.setState({
        menuActive: false,
      })
      this.contextMenuStrip.reset()
      return true
    }

    // navigator

    // finally
    return false
  }

  render() {
    return (
      <ContextMenuStrip
        ref={(c) => this.contextMenuStrip = c}
        width={60}
        height={Platform.OS === 'ios' ? 40 : 48}
        itemWidth={150}
        itemHeight={38}
        btnSize={40}
        degrees={135}
        scaleRange={1.5}
        btnColorRange="rgba(88,66,77,0.8)"
        menuMarginRight={10}
        onPress={() => this.onMenuToggled(true)}
        onReset={() => this.onMenuToggled(false)}>

        {/*Icon*/}
        <ContextMenuStrip.Item
          iconType="FontAwesome"
          iconName="comments"
          label="chat"
          onPress={() => {}}
        />
        <ContextMenuStrip.Item
          iconType="FontAwesome"
          iconName="gear"
          label="setting"
          onPress={() => {}}
        />
        <ContextMenuStrip.Item
          iconType="FontAwesome"
          iconName="refresh"
          label="refresh"
          onPress={() => {}}
        />

        {/*Image Icon*/}
        <ContextMenuStrip.Item
          iconType="Image"
          iconName={require('./icons/about.png')}
          label="about"
          onPress={() => {}}
        />

        {/*Customize*/}
        <ContextMenuStrip.Item
          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={require('./icons/chat.png')}
              />
            </View>

            <Text
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                marginLeft: 5,
              }}
            >
              Come on
            </Text>
          </View>
        </ContextMenuStrip.Item>

      </ContextMenuStrip>
    )
  }
}


AppRegistry.registerComponent('example', () => example)