Repolode
Enviar
ammarahm-ed

ammarahm-ed/react-native-actions-sheet

Componente de action sheet (bottom sheet) multiplataforma para React Native, compatível com Android, iOS e Web e com uma API flexível para conteúdo personalizado.

Ver no GitHubSite
Estrelas
2,195
Forks
158
Issues abertas
45
Último commit
anteontem

O que é?

react-native-actions-sheet é um componente React Native que renderiza um bottom sheet, usado com frequência para menus de ações, seletores e drawers. Ele funciona no Android, iOS e Web, e permite inserir qualquer conteúdo React na sheet.

A biblioteca usa react-native-reanimated, react-native-worklets, react-native-gesture-handler e react-native-safe-area-context. Gestos, rolagem e animações são executados na thread de UI, então uma thread JavaScript ocupada não trava a sheet. A versão 11 exige a New Architecture do React Native; apps que ainda usam a arquitetura legada devem continuar na versão 10.

A biblioteca oferece vários pontos de encaixe, fechamento por gesto de deslizar baseado na velocidade ao soltar, várias áreas roláveis em uma mesma sheet e um SheetGestureBlocker para sliders, mapas e WebViews. Também inclui um mock oficial do Jest para testes.

Recursos principais

  • 01Funciona no Android, iOS e Web com uma única base de código.
  • 02Renderiza qualquer conteúdo React dentro da sheet.
  • 03Executa gestos e animações na thread de UI.
  • 04Oferece suporte a vários pontos de encaixe e fechamento por gesto de deslizar.
  • 05Inclui um bloqueador de gestos para sliders, mapas e WebViews.
  • 06Inclui um mock oficial do Jest para testes.

Casos de uso

  • Exibir um menu de ações ou de contexto em um bottom sheet em um app React Native.
  • Criar um seletor ou painel de seleção que desliza para cima a partir da parte inferior da tela.
  • Incorporar formulários ou listas roláveis em um drawer arrastável para dispositivos móveis ou Web.

Início rápido

  1. 1

    Instale a biblioteca

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

    Instale as dependências peer necessárias

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

    Siga o guia de instalação na documentação para ver os detalhes da configuração

Antes de usar

  • A versão 11 requer a New Architecture do React Native; apps com a arquitetura legada devem continuar na versão 10.
  • Depende de várias bibliotecas nativas (reanimated, worklets, gesture-handler, safe-area-context), que também precisam ser instaladas.

Tópicos

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

Perguntas frequentes

O que é react-native-actions-sheet?
Componente de action sheet (bottom sheet) multiplataforma para React Native, compatível com Android, iOS e Web e com uma API flexível para conteúdo personalizado. react-native-actions-sheet é um componente React Native que renderiza um bottom sheet, usado com frequência para menus de ações, seletores e drawers. Ele funciona no Android, iOS e Web, e permite inserir qualquer conteúdo React na sheet.
react-native-actions-sheet é gratuito? Qual é a licença?
react-native-actions-sheet é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-native-actions-sheet ainda é mantido?
Manutenção ativa. O último commit de react-native-actions-sheet foi em 18 de out. de 2026.
Para que posso usar react-native-actions-sheet?
Exibir um menu de ações ou de contexto em um bottom sheet em um app React Native. Criar um seletor ou painel de seleção que desliza para cima a partir da parte inferior da tela. Incorporar formulários ou listas roláveis em um drawer arrastável para dispositivos móveis ou Web.
Como instalar react-native-actions-sheet?
Instale a biblioteca: npm install react-native-actions-sheet Instale as dependências peer necessárias: npm install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-safe-area-context Siga o guia de instalação na documentação para ver os detalhes da configuração
Onde consigo react-native-actions-sheet?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ammarahm-ed/react-native-actions-sheet

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados