ActionSheet

Una ActionSheet es un componente dinámico de nuestra biblioteca que ofrece a los usuarios un menú de opciones o acciones dentro de una aplicación. Por lo general, aparece como un modal o una ventana emergente, que presenta una lista de opciones relevantes para el contexto actual o la interacción del usuario. Las hojas de acción permiten a los usuarios tomar decisiones o iniciar acciones específicas de manera conveniente, mejorando la usabilidad y la eficiencia. Con un estilo personalizable y configuraciones flexibles, nuestro componente ActionSheet se integra a la perfección en diversas interfaces, lo que permite a los usuarios una navegación e interacción intuitivas.

Uso

Uso básico

import React, {useState} from 'react';
import {ActionSheet} from 'rn-inkpad';

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  return <ActionSheet setVisible={setIsVisible} visible={isVisible} />;
};

Props

Nombre	Tipo	Requerido	Descripción
visible	boolean	SI	Muestra/Oculta el ActionSheet
setVisible	(visible: boolean) => void	SI	Función que controla la visibilidad del componente
actions	Action[]	NO	Arreglo de acciones a mostrar
cancelText	string	NO	Texto para el botón cancelar
description	string	NO	Texto de descripción para el ActionSheet
showCancelButton	boolean	NO	Muestra el botón cancelar button
showIconOnIos	boolean	NO	Muestra el ícono en iOS
showCloseButton	boolean	NO	Muestra el botón cerrar button
theme	ActionSheetTheme	NO	Personaliza el tema de tu ActionSheet.
title	string	NO	Título para tu ActionSheet.

Action props

Nombre	Tipo	Requerido	Descripción
text	string	SI	Texto del botón.
icon	string	NO	Ícono del botón.
iconColor	string	NO	Color del ícono.
textStyle	StyleProp<TextStyle>	NO	Estilos personalizados para el botón.
onPress	() => void	SI	Función que se ejecuta al presionar el botón.

ActionSheetTheme props

Nombre	Tipo	Predeterminado iOS	Predeterminado Android
appearance	'light' | 'dark'	Sistema	Sistema
backgroundColor	string	Claro: '#F4F4F4' Oscuro: '#171717'	Claro: '#FFFFFF' Oscuro: '#171717'
buttonColor	string	Claro: '#FFFFFF' Oscuro: '#242625'	Claro: '#FFFFFF' Oscuro: '#171717'
closeBackgroundColor	string	Claro: '#ECECEC' Oscuro: '#1C1E1D'	Claro: '#ECECEC' Oscuro: '#1C1E1D'
closeIconColor	string	Claro: '#767779' Oscuro: '#959394'	Claro: '#767779' Oscuro: '#959394'
separatorColor	string	Claro: '#E4E4E4' Oscuro: '#343434'	N/A
textColor	string	Claro: '#0A0A0A' Oscuro: '#FFFFFF'	Claro: '#0A0A0A' Oscuro: '#FFFFFF'
theme	'cupertino' | 'material'	Sistema	Sistema

Uso con props

import React, {useState} from 'react';
import {ActionSheet} from 'rn-inkpad';

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <ActionSheet
      actions={[
        {
          text: 'Change profile picture',
          icon: 'ear',
          onPress: () => console.log('Change profile picture'),
        },
        {
          text: 'View profile picture',
          icon: 'eye',
          onPress: () => console.log('View profile picture'),
        },
        {
          text: 'View status',
          icon: 'bandage',
          onPress: () => console.log('View status'),
        },
      ]}
      setVisible={setIsVisible}
      description="Select any action below to proceed"
      title="Select an action"
      visible={isVisible}
    />
  );
};

Ejemplos

iOS

Android

Iconos

Nombre	Tipo	Por defecto	Descripción
closeIcon	IconProp	cruz interna	Icono del botón de cerrar superior.
cancelIcon	IconProp	cruz interna	Icono del botón cancelar.