react-native-easy-action-sheet

cross platform actionSheet

Usage no npm install needed!

<script type="module">
  import reactNativeEasyActionSheet from 'https://cdn.skypack.dev/react-native-easy-action-sheet';
</script>

README

react-native-easy-action-sheet

npm npm npm npm

ScreenShots

react-native-easy-action-sheet react-native-easy-action-sheet

Installation

  • npm: npm install react-native-easy-action-sheet --save
  • Yarn: yarn add react-native-easy-action-sheet

Example

import { Header } from 'react-navigation'
import { Header } from 'react-navigation-stack' (4.x)
import ActionSheet from 'react-native-easy-action-sheet'
class Demo extends React.Component {
  showActionSheet = () => {
    this.ActionSheet.show()
  }
  render() {
    return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          androidHeaderHeight={Header.HEIGHT}
          ref={e => this.ActionSheet = e}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

Props

props type default Info
options [string] undefined a list of button titles (required)
cancelButtonIndex number 0 index of cancel button in options
destructiveButtonIndex number undefined index of destructive button in options
title string undefined a list of button titles (required)
message string undefined a message to show below the title
tintColor string the color used for non-destructive button titles
onPress func (index) => console.log(index) button on press
androidHeaderHeight number undefined height of navHeader on android (required)