React Native library to display a modal popup quick actions menu
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
screenshots Added screen shot for demo Sep 1, 2018
CircleActionItem.js Add files Sep 1, 2018
CircleQuickAction.js Add files Sep 1, 2018
LICENSE Initial commit Sep 1, 2018
OverlayView.js
README.md Update README, clearify example Sep 1, 2018
index.js Add files Sep 1, 2018
package.json Update version Sep 1, 2018

README.md

Circle Quick Actions

React Native library to display a modal popup quick actions menu by long press.

Demo

Installation

First, download the library from npm:

npm install rn-circle-quick-actions --save

Usage

import CircleQuickActions from 'rn-circle-quick-actions'

// Max items is 4
const items = [
  {
    image: require('some_image'),
    imageActive: require('some_image_activated'),
    handler: () => {
      alert('First action')
    }
  },
  {
    image: require('some_image'),
    imageActive: require('some_image_activated'),
    handler: () => {
      alert('Second action')
    }
  }
]

const QuickActionView () => (
  <CircleQuickActions
    onPress={() => alert('It is a normal press')}
    items={items}
  >
    <Image
      style={{ width: 320, height: 200 }}
      source={{ uri: 'YOUR_IMAGE_URL' }}
    />
  </CircleQuickActions>
);

Usage: With FlatList or scrollable view

We provided some lifecycle methods (shouldEnable, willOpen, didOpen, didClose) to enable more control your scroll view.

This is an example with Flatlist. We need to control scroll enabled to use pan gesture.

export default class App extends Component {

  setScrollEnabled = (isEnabled) => {
    if (this.list) {
      this.list.getScrollResponder().setNativeProps({ scrollEnabled: isEnabled })
    }
  }

  renderListItem = ({ item }) => {
    return (
      <CircleQuickAction
        onPress={() => alert('On press')}
        // shouldEnable={(e) => shouldEnable(e)}
        willOpen={() => this.setScrollEnabled(false)}
        // didOpen={() => onDidOpenMenu()}
        didClose={() => this.setScrollEnabled(true)}
        items={items}
      >
        <Image
          source={item.image}
          style={{ width: 320, height: 300 }}
        />
      </CircleQuickAction>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          ref={list => this.list = list}
          style={{ flex: 1 }}
          data={data}
          keyExtractor={(item) => item.id}
          renderItem={this.renderListItem}
        />
      </View>
    );
  }
}