Guías Técnicas

ActionSheetIOS en React Native: Hojas de Acción en iOS

  ¿Qué es ActionSheetIOS y para qué se usa?

ActionSheetIOS, es una API propia de React Native, específicamente para dispositivos iOS. ActionSheetIOS es utilizado para mostrar un menú de opciones (una hoja de acción) en dispositivos iOS. Este menú permite al usuario seleccionar entre varias opciones en un formato visual tipo hoja emergente.

Estructura básica de ActionSheetIOS

ActionSheetIOS es un módulo que se usa para invocar un menú de acciones en dispositivos iOS. A diferencia de otros componentes de React Native, ActionSheetIOS no es un componente visible, sino que se utiliza mediante su API.

jsx 
import React from 'react';
import { View, Button, ActionSheetIOS } from 'react-native';

const App = () => {
const showActionSheet = () => {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['Cancelar', 'Opción 1', 'Opción 2', 'Opción 3'],
      destructiveButtonIndex: 1, // Botón destructivo (por ejemplo, eliminar)
      cancelButtonIndex: 0, // Botón de cancelar
    },
    (buttonIndex) => {
      if (buttonIndex === 1) {
        console.log('Opción 1 seleccionada');
      } else if (buttonIndex === 2) {
        console.log('Opción 2 seleccionada');
      } else if (buttonIndex === 3) {
        console.log('Opción 3 seleccionada');
      }
    }
  );
};

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Button title="Mostrar ActionSheet" onPress={showActionSheet} />
  </View>
);
};

export default App;

Propiedades de ActionSheetIOS

  • options: Un arreglo de cadenas de texto que define las opciones del menú.
  • cancelButtonIndex: El índice del botón que actuará como “Cancelar”.
  • destructiveButtonIndex: El índice del botón que tendrá un estilo destructivo (usualmente usado para eliminar o acciones peligrosas).
  • tintColor: (Opcional) Un color para aplicar a los botones del menú.

🧭 Ejemplo de uso con ActionSheetIOS

En este ejemplo, creamos una hoja de acción con varias opciones y un botón de cancelación.

jsx 
import React from 'react';
import { View, Button, ActionSheetIOS } from 'react-native';

const App = () => {
const showActionSheet = () => {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['Cancelar', 'Opción 1', 'Opción 2', 'Opción 3'],
      cancelButtonIndex: 0, // Botón de cancelar
      destructiveButtonIndex: 3, // Opción destructiva
    },
    (buttonIndex) => {
      switch (buttonIndex) {
        case 1:
          console.log('Opción 1 seleccionada');
          break;
        case 2:
          console.log('Opción 2 seleccionada');
          break;
        case 3:
          console.log('Opción 3 seleccionada');
          break;
        default:
          console.log('Acción cancelada');
          break;
      }
    }
  );
};

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Button title="Mostrar Acción" onPress={showActionSheet} />
  </View>
);
};

export default App;

Personalizar el color de los botones

Puedes personalizar el color de los botones en el ActionSheetIOS usando la propiedad tintColor.

jsx 
ActionSheetIOS.showActionSheetWithOptions(
{
  options: ['Cancelar', 'Eliminar', 'Compartir'],
  cancelButtonIndex: 0,
  destructiveButtonIndex: 1,
  tintColor: 'red', // Cambia el color del texto de los botones
},
(buttonIndex) => {
  if (buttonIndex === 1) {
    console.log('Elemento eliminado');
  }
}
);
  Resumen

ActionSheetIOS permite mostrar un menú emergente en dispositivos iOS con varias opciones de acción. Es ideal para ofrecer al usuario un conjunto de opciones de manera sencilla y accesible. Utilizando las propiedades adecuadas, puedes personalizar el comportamiento y apariencia de este menú para adaptarlo a las necesidades de tu aplicación.