jacklam718/react-native-action-sheet-component

React Native Action Sheet Component for iOS & Android.

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

Try it with Exponent

Preview

Installation

yarn

yarn add react-native-action-sheet-component

npm

npm install --save react-native-action-sheet-component

Usage with ActionSheetManager

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

Options

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

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

Update

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

Hide

ActionSheetManager.hide(() => {
  console.log('callback');
});

Usage with ActionSheet

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

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

actionSheet.show(() => {
  console.log('callback - show');
})

Hide

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
hideOnSelected?	boolean	true
hideOnSelceted? DEPRECATED	boolean	true
hideOnHardwareBackPress?	boolean	true
showSeparator?	boolean	true
showSparator? DEPRECATED	boolean	true
scrollEnabled?	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
textStyle?	any	null

react-native-action-sheet-component's Issues

ActionSheetManager is not showing items

I have a problem with ActionSheetManager when usage like this:

import React, { Component } from 'react';
import { Button } from 'react-native';
import ActionSheetManager, { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component';

export default class App extends Component {
  render() {
    const options = {
      children: [
        <ActionSheetItem
          key='item-1'
          text="Item 1"
          value="item1"
        />,
        <ActionSheetItem
          key='item-2'
          text="Item 2"
          value="item2"
        />
      ],
    };

    return (
      <Button onPress={() => ActionSheetManager.show(options)} title="Open" />
    );
  }
}

Not working for android

Integrated in my app, works for iOS 10.2 but not on android

Unknown plugin "flow-react-proptypes" specified in .babelrc.env.development

I'm getting the following runtime error

Unknown plugin "flow-react-proptypes" specified in "node_modules/react-native-action-sheet-component/.babelrc.env.development

React-native version 0.41.2, iOS

Wrong position when using Icons

ActionSheet has 3 items, every with icon in size 42, position: doesn't matter, problem is in both.
Initial position is wrong, first (for top position is last) item is visible:

If 'Show' appearing works correctly:

If 'Hide' after that position will be right. Problem only with initial position.

ActionSheet bottom position

Test case using react-native-navbar

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#DDDDDD' }}>
        <NavigationBar
          style={{ backgroundColor: '#ABC' }}
          title={{ title: 'Home' }}
          rightButton={{ title: 'Choose', handler: () => this.actionSheet.show() }}
        />
        <ActionSheet
          ref={(actionSheet) => { this.actionSheet = actionSheet }}
          position="bottom"
          onChange={this.onChange}
        >
          <ActionSheetItem
            text="Github"
            value="item1"
            selectedIcon={checkedIcon}
            onPress={this.onItemPress}
          />
          <ActionSheetItem
            text="Facebook"
            value="item2"
            selectedIcon={checkedIcon}
            onPress={this.onItemPress}
          />
        </ActionSheet>
      </View>
    )
  }

When selecting an item the first time, there is still some white overlap from the action sheet at the bottom of the view. But subsequent item selections clear it up.

Not appearing on Android

I got the build working but the component is not showing on Android like it does for iOS

installed the wrong version package

npm install --save react-native-action-sheet-component

It gave the lower version package which is 0.0.36 not 0.1.48

Actionsheet do not completely hide when having too many children

As title, it is easy to reproduce, please see below:

      ActionSheetManager.show({
        style: ThemeStyles.generalItemBg,
        separatorStyle: ThemeStyles.generalItemBorder,
        showSelectedIcon: false,
        children: [
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />,
          <ActionSheetItem
            key={uuid.v4()}
            text={<Text style={ThemeStyles.authorComment}>Share This!</Text>}
            onPress={() => )}
          />
         ]})

babel-* as dependencies

They should be devDependencies.

Warning: BackAndroid is deprecated. Please use BackHandler instead.

Index is always -1

import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { ActionSheet, ActionSheetItem } from 'react-native-action-sheet-component'
import NavigationBar from 'react-native-navbar'

const checkedIcon = <Ionicons name="ios-checkmark-outline" size={30} />

export default class ActionSheetExample extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedItems: [],
    }
  }

  onChange = (value, index, values) => {
    console.log('OnChange()', 'value:', value, 'index:', index, 'values:', values)
    this.setState({ selectedItems: values })
  }

  onItemPress = (value, index) => {
    console.log('OnItemPress()', 'value:', value, 'index:', index)
  }

  showActionSheet = () => {
    this.actionSheet.show()
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#DDDDDD' }}>
        <NavigationBar
          style={{ backgroundColor: '#ABC' }}
          title={{ title: 'Home' }}
          rightButton={{ title: 'Choose', handler: () => this.actionSheet.show() }}
        />
        <ActionSheet
          ref={(actionSheet) => { this.actionSheet = actionSheet }}
          position="bottom"
          onChange={this.onChange}
        >
          <ActionSheetItem
            text="Github"
            value="item1"
            index={0}
            selectedIcon={checkedIcon}
            onPress={this.onItemPress}
          />
          <ActionSheetItem
            text="Facebook"
            value="item2"
            index={1}
            selectedIcon={checkedIcon}
            onPress={this.onItemPress}
          />
        </ActionSheet>
      </View>
    )
  }
}

OnItemPress() value: item1 index: -1
OnChange() value: item1 index: -1 values: ["item1"]
OnItemPress() value: item2 index: -1
OnChange() value: item2 index: -1 values: ["item2"]

At first I thought index would be auto set by the ActionSheet, so then I tried specifying explicitly in props (see above).

Perhaps ActionSheet could set index automatically if not specified in props?