https://github.com/akshit5230/rn-action-picker

A simple action sheet style picker for iOS and Android. Native action sheet in iOS.
https://github.com/akshit5230/rn-action-picker

Last synced: about 8 hours ago
JSON representation

A simple action sheet style picker for iOS and Android. Native action sheet in iOS.

• Host: GitHub
• URL: https://github.com/akshit5230/rn-action-picker
• Owner: akshit5230
• Created: 2019-05-14T13:04:17.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-06-03T12:25:25.000Z (over 5 years ago)
• Last Synced: 2024-04-26T13:20:19.336Z (9 months ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - rn-action-picker - A simple action picker for iOS and Android. Renders Native ActionSheetIOS Component in iOS and custom ActionSheet lookalike component in Android. (Components / UI)
• awesome-react-native - rn-action-picker - A simple action picker for iOS and Android. Renders Native ActionSheetIOS Component in iOS and custom ActionSheet lookalike component in Android. (Components / UI)
• awesome-react-native - rn-action-picker - A simple action picker for iOS and Android. Renders Native ActionSheetIOS Component in iOS and custom ActionSheet lookalike component in Android. (Components / UI)

README

        
# React Native Action Picker

A simple action picker for iOS and Android. Renders Native ActionSheetIOS Component in iOS and custom ActionSheet lookalike component in Android.

## Installation

`npm i --save rn-action-picker`

## Usage

1. Minimal example

```

 {

    if (buttonIndex === 1) {

      // Do something if you tap on 'Camera'

    } else if (buttonIndex === 2) {

      // Do something if you tap on 'Gallery'

    }

   }

/>

```

2. Full Example 

```

import React from 'react';

import {

  View, Button

} from 'react-native;

import ActionPicker from 'rn-action-sheet';

const options = {

  options: ['Cancel', 'Camera', 'Gallery'],

  destructiveButtonIndex: 1,

  title: "Choose photo from?",

  message: "Please select where you want the photo to be picked from",

  tintColor: "#000000"

}

export default class MyExample extends React.Component {

  

  render() {

    return(

      

         this.actionSheetRef.show()} />

         this.actionSheetRef = ref}

          options={options}

          onPressAction={this.onPressAction}

        />

      

    )

  }

  

  onPressAction = (buttonIndex) => {

    if (buttonIndex === 1) {

      // Do something if you tap on 'Camera'

    } else if (buttonIndex === 2) {

      // Do something if you tap on 'Gallery'

    }

  }

  

}

const styles = {

  container: {

    justifyContent: 'center',

    alignItems: 'center'

  }

}

```

## Props

| Name | Description | Type |

| --- | --- | --- |

| options | Takes an object which has all the properties for the action sheet such as options array | Object |

| onPressAction | Callback function to trigger press on an option. Returns the index of the option pressed. | Function |

### Options 

| Name | Description | Type | Example | 

| --- | --- | --- | --- |

| options | An array of options to show in the action sheet. Note that the first option (at index 0) will always be the cancel button. | Array of Strings | ['Cancel', 'Camera', 'Gallery'] |

| destructiveButtonIndex | If you want to show a button in red color, pass the index of that option to this. | Integer | 2 |

| title | Provide a title to the action sheet. Renders on top. | String | "Choose an option" |

| message | Provide a descriptive message below the title. | String | "Please choose one of the following options" |

| tintColor | Color for the options text | String | "#000000" |

Note that `cancelButtonIndex` is default to 0 always. So you must put that option at 0th index in the `options` array.

### Functions

| Name | Description | Example | 

| --- | --- | --- |

| show() | Create a reference of the ActionSheet component and call this function to present it. | `this._actionSheetRef.show()` |

Hope it helps!