# react-native-action-sheet-component

> React Native Action Sheet Component for iOS & Android.

Latest version **0.0.36** (published 2018-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-action-sheet-component
pnpm add react-native-action-sheet-component
yarn add react-native-action-sheet-component
bun add react-native-action-sheet-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.36 |
| Published | 2018-03-04 |
| First published | 2017-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | Jack Lam |
| Maintainers | jacklam |

## Links

- npm: https://www.npmjs.com/package/react-native-action-sheet-component
- Repository: https://github.com/jacklam718/react-native-action-sheet-component
- Homepage: https://github.com/jacklam718/react-native-action-sheet-component#readme
- Issues: https://github.com/jacklam718/react-native-action-sheet-component/issues
- npm.io page: https://npm.io/package/react-native-action-sheet-component

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [babel-preset-es2016](https://npm.io/package/babel-preset-es2016.md) ^6.22.0
- [babel-preset-react-native](https://npm.io/package/babel-preset-react-native.md) ^1.9.1
- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) ^1.2.0
- [react-native-animated-overlay](https://npm.io/package/react-native-animated-overlay.md) ^0.0.10
- [babel-plugin-flow-react-proptypes](https://npm.io/package/babel-plugin-flow-react-proptypes.md) ^2.1.3

## Recent versions

- 0.0.36 (latest) — 2018-03-04
- 0.0.34 — 2017-09-23
- 0.0.33 — 2017-06-11
- 0.0.32 — 2017-06-11
- 0.0.31 — 2017-06-11
- 0.0.30 — 2017-06-11
- 0.0.29 — 2017-06-11
- 0.0.28 — 2017-06-11
- 0.0.27 — 2017-06-11
- 0.0.26 — 2017-05-23
- 0.0.25 — 2017-05-01
- 0.0.24 — 2017-04-16
- 0.0.23 — 2017-03-13
- 0.0.22 — 2017-03-12
- 0.0.21 — 2017-03-12
- … 19 more at https://npm.io/package/react-native-action-sheet-component/versions

## README

## React Native Action Sheet Component
React Native Action Sheet Component for iOS & Android.

Pull request are welcomed. Please follow the Airbnb style guide [Airbnb JavaScript](https://github.com/airbnb/javascript)

[Try it with Exponent](https://exp.host/@jacklam718/action-sheet-example)

#### Preview
<img src="https://raw.githubusercontent.com/jacklam718/react-native-action-sheet-component/master/.github/action-sheet.gif" width="300">
<img src="https://raw.githubusercontent.com/jacklam718/react-native-action-sheet-component/master/.github/action-sheet.png" width="300">


## Installation
##### yarn
`yarn add react-native-action-sheet-component`
##### npm
`npm install --save react-native-action-sheet-component`


## Usage with `ActionSheetManager`
```javascript
import { EvilIcons, Ionicons } from '@exponent/vector-icons';
import ActionSheetManager { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';
```

##### Options
```javascript
const actionSheetItems = [
  <ActionSheetItem
    key='item-1'
    text="Github"
    value="github"
    selectedIcon={checkedIcon}
    icon={
      <EvilIcons name="sc-github" size={42} />
    }
    onPress={this.onItemPress}
  />,
  <ActionSheetItem
    key='item-2'
    text="Facebook"
    value="facebook"
    selectedIcon={checkedIcon}
    icon={
      <EvilIcons name="sc-facebook" color="#4363A2" size={42} />
    }
    onPress={this.onItemPress}
  />,
];

const options = {
  defaultValue: ['github'],
  children: actionSheetItems,
  onChange: (value, index, selectedData) => {
  },
}
```

##### Show
```javascript
ActionSheetManager.show(options, () => {
  console.log('callback');
});
```

##### Update
```javascript
ActionSheetManager.update(options, () => {
  console.log('callback');
});
```

##### Hide
```javascript
ActionSheetManager.hide(() => {
  console.log('callback');
});
```


## Usage with `ActionSheet`
```javascript
import { EvilIcons, Ionicons } from '@exponent/vector-icons';
import { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';
```

```javascript
class Example extends Component {
  constructor(props) {
    super(props) {

      this.state = {
        defaultSelectedValues: ['github'],
      }
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <ActionSheet
          ref={(actionSheet) => { this.topActionSheet = actionSheet; }}
          position="top"
          onChange={this.onChange}
          defaultValue={this.state.defaultSelectedValues}
          multiple
        >
          <ActionSheetItem
            text="Github"
            value="github"
            selectedIcon={checkedIcon}
            icon={
              <EvilIcons name="sc-github" size={42} />
            }
            onPress={this.onItemPress}
          />
          <ActionSheetItem
            text="Facebook"
            value="facebook"
            selectedIcon={checkedIcon}
            icon={
              <EvilIcons name="sc-facebook" color="#4363A2" size={42} />
            }
            onPress={this.onItemPress}
          />
        </ActionSheet>
      </View>
    )
  }
}
```


##### Show
```javascript
actionSheet.show(() => {
  console.log('callback - show');
})
```

##### Hide
```javascript
actionSheet.hide(() => {
  console.log('callback - hide');
})
```

## Props
### ActionSheet
| Prop | Type | Default | Note |
|---|---|---|---|
| `value?` | `any` | `null` | | |
| `defaultValue?` | `any` | `null` | | |
| `onShow?` | `Function` | `() => {}` | |
| `onHide?` | `Function` | `() => {}` | |
| `style?` | `any` | `null` | |
| `onChange?` | `Function` | `() => {}` | |
| `show?` | `boolean` | `false` | |
| `showSelectedIcon?` | `boolean` | `true` | | |
| `multiple?` | `boolean` | `false` | |
| `hideOnSelceted?` | `boolean` | `true` | |
| `hideOnHardwareBackPress?` | `boolean` | `true` | |
| `showSparator?` | `boolean` | `true` | |
| `animationDuration?` | `number` | `250` | |
| `overlayOpacity?` | `number` | `0.3` | |
| `position?` | `string` | `top` | |
| `maxHeight?` | `number` | `Dimensions.get('window').height / 2` | |
| `children?` | `any` | `null` | |

### ActionSheetItem
| Prop | Type | Default | Note |
|---|---|---|---|
| `text` | `any` | `null` | | |
| `icon?` | `any` | `null` | | |
| `index?` | `number` | `null` | | |
| `selectedIcon?` | `number` | ` require('./img/checkmark.png')` | | |
| `selected?` | `boolean` | `false` | | |
| `showSelectedIcon?` | `boolean` | `true` | | |
| `onPress?` | `Function` | `() => {}` | | |
| `style?` | `any` | `null` | | |

---
_Source: https://npm.io/package/react-native-action-sheet-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._