Repolode
Enviar
ammarahm-ed

ammarahm-ed/react-native-actions-sheet

Componente multiplataforma de hoja de acciones (bottom sheet) para React Native, compatible con Android, iOS y Web y con una API flexible para contenido personalizado.

Ver en GitHubSitio web
Estrellas
2,195
Forks
158
Issues abiertos
45
Último commit
anteayer

¿Qué es?

react-native-actions-sheet es un componente de React Native que muestra una hoja inferior, usada a menudo para menús de acciones, selectores y cajones. Funciona en Android, iOS y Web, y permite incluir contenido de React arbitrario dentro de la hoja.

La biblioteca se basa en react-native-reanimated, react-native-worklets, react-native-gesture-handler y react-native-safe-area-context. Los gestos, el desplazamiento y las animaciones se ejecutan en el hilo de la UI, por lo que una carga elevada en el hilo de JavaScript no bloquea la hoja. La versión 11 requiere la Nueva Arquitectura de React Native; se recomienda que las aplicaciones que aún usan la arquitectura heredada permanezcan en la versión 10.

Ofrece varios puntos de ajuste, cierre con un gesto rápido según la velocidad al soltar, varias áreas desplazables dentro de una misma hoja y un SheetGestureBlocker para controles deslizantes, mapas y WebViews. También incluye un mock oficial para Jest, pensado para pruebas.

Funciones clave

  • 01Funciona en Android, iOS y Web desde una sola base de código.
  • 02Muestra contenido de React arbitrario dentro de la hoja.
  • 03Los gestos y las animaciones se ejecutan en el hilo de la UI.
  • 04Admite varios puntos de ajuste y el cierre con un gesto rápido.
  • 05Incluye un bloqueador de gestos para controles deslizantes, mapas y WebViews.
  • 06Incluye un mock oficial para Jest, pensado para pruebas.

Casos de uso

  • Mostrar un menú de acciones o contextual en una hoja inferior dentro de una aplicación de React Native.
  • Crear un selector o panel de opciones que se deslice hacia arriba desde la parte inferior.
  • Incrustar formularios o listas desplazables en un cajón arrastrable para dispositivos móviles o la Web.

Inicio rápido

  1. 1

    Instala la biblioteca

    npm install react-native-actions-sheet
  2. 2

    Instala las dependencias peer necesarias

    npm install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context
  3. 3

    Sigue la guía de instalación de la documentación para obtener instrucciones de configuración

Antes de usarlo

  • La versión 11 requiere la New Architecture de React Native; las aplicaciones con la arquitectura heredada deben seguir usando la versión 10.
  • Depende de varias bibliotecas nativas (reanimated, worklets, gesture-handler, safe-area-context), que también deben instalarse.

Temas

#react-native#bottom-sheet#action-sheet#ui-component#cross-platform#expo#typescript#action#actionsheet#bottom-app-bar

Preguntas frecuentes

¿Qué es react-native-actions-sheet?
Componente multiplataforma de hoja de acciones (bottom sheet) para React Native, compatible con Android, iOS y Web y con una API flexible para contenido personalizado. react-native-actions-sheet es un componente de React Native que muestra una hoja inferior, usada a menudo para menús de acciones, selectores y cajones. Funciona en Android, iOS y Web, y permite incluir contenido de React arbitrario dentro de la hoja.
¿react-native-actions-sheet es gratuito? ¿Qué licencia tiene?
react-native-actions-sheet es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-native-actions-sheet sigue mantenido?
Mantenimiento activo. El último commit de react-native-actions-sheet fue el 18 oct 2026.
¿Para qué puedo usar react-native-actions-sheet?
Mostrar un menú de acciones o contextual en una hoja inferior dentro de una aplicación de React Native. Crear un selector o panel de opciones que se deslice hacia arriba desde la parte inferior. Incrustar formularios o listas desplazables en un cajón arrastrable para dispositivos móviles o la Web.
¿Cómo se instala react-native-actions-sheet?
Instala la biblioteca: npm install react-native-actions-sheet Instala las dependencias peer necesarias: npm install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context Sigue la guía de instalación de la documentación para obtener instrucciones de configuración
¿Dónde consigo react-native-actions-sheet?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/ammarahm-ed/react-native-actions-sheet

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados