Preview

Try it on expo! https://expo.io/@enriquedev/react-native-action-picker-demo

Install

To Install this library navigate to your project root in terminal and type:

npm install --save react-native-action-picker

Now, in your code, import the ActionPicker component:

import {ActionPicker} from 'react-native-action-picker';

And you are ready to go!

This component does not require linking and its compatible with Expo!

API reference

| Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | options | Array | - | Required. An array of objects containing an object with two keys action(func) and label(string) | | isVisible | boolean | - | Determines if the modal is visible or not | | cancelLabel | string | 'Cancel' | Label for the cancel action. | | onCancelRequest | function | - | Function responsible for hiding the picker. |

Example

import React from 'react';
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ActionPicker } from 'react-native-action-picker';

export default class App extends React.Component {
  state = {
    isModalVisible: false,
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.toggleModal}>
          <Text style={styles.text}>Open Modal</Text>
        </TouchableOpacity>

        <ActionPicker
          options={this.createOptions()}
          isVisible={this.state.isModalVisible}
          onCancelRequest={this.toggleModal} />
      </View>
    );
  }

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };

  sendAlert = (actionName) => {
    Alert.alert('Info', `${actionName} pressed!`);
  };

  createOptions = () => {
    return [
      {label: 'Action 1', action: () => this.sendAlert('Action 1')},
      {label: 'Action 2', action: () => this.sendAlert('Action 2')},
      {label: 'Action 3', action: () => this.sendAlert('Action 3')}
    ];
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  button: {
    width: 150,
    height: 70,
    backgroundColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center'
  },

  text: {
    fontSize: 22,
    fontWeight: '500'
  }
});