React Native – How to use native layout

Action menu

Action menu component

Create new folder “app/helpers/action-menu”

index.ios.js

import { ActionSheetIOS } from 'react-native'

export default ActionSheetIOS

index.android.js

import DialogAndroid from 'react-native-dialogs'

export default {
  async showActionSheetWithOptions (options, callback) {
    const { title = null, message = null, options: buttons = [], cancelButtonIndex = false, destructiveButtonIndex = false } = options

    let positiveText = null
    if (cancelButtonIndex !== false) {
      positiveText = buttons[cancelButtonIndex]
    }

    let negativeText = null
    if (destructiveButtonIndex !== false) {
      negativeText = buttons[destructiveButtonIndex]
    }

    const items = buttons.map((item, index) => ({
      index,
      label: item
    })).filter(({ index }) => index !== cancelButtonIndex && index !== destructiveButtonIndex)

    const { action, selectedItem } = await DialogAndroid.showPicker(title, message, {
      negativeColor: 'red',
      negativeText,
      positiveText,
      items
    })

    if (action === 'actionNegative') {
      callback(destructiveButtonIndex)
    } else if (selectedItem) {
      callback(selectedItem.index) // Send the index just like on IOS
    }

  }
}

Usage

  import ActionMenu from 'app/helpers/action-menu'
  
  ...
  
  ActionMenu.showActionSheetWithOptions({
    title: 'Select an option',
    options: ['Option 1', 'Option 2', 'Cancel'],
    cancelButtonIndex: 2
  }, (index) => {
    if (index === 0) {
      // Option 1
    } else if (index === 1) {
      // Option 2
    }
  })