Radio buttons no React Native, feitos com Pressable
Guia de radio buttons no React Native
Radio button no React Native: grupo acessível, sem biblioteca | We.Inc
O React Native não tem componente radio. Monte um grupo de radio acessível com Pressable, accessibilityRole radio e accessibilityState checked. Prévia ao vivo e código.
O React Native principal não tem componente de radio button; a lista de interface dele tem só Button e Switch. Monte um com Pressable: desenhe um círculo externo e um ponto interno, guarde o valor selecionado no componente pai e dê a cada opção accessibilityRole="radio" mais accessibilityState={{ checked }}. Envolva o conjunto em uma View com accessibilityRole="radiogroup".
Props de acessibilidade para um grupo de radio
Elemento
Prop
Valor
View que envolve
accessibilityRole
"radiogroup"
Cada opção
accessibilityRole
"radio"
Cada opção
accessibilityState
{ checked: true ou false }
Opção desativada
accessibilityState
{ disabled: true }, mais a prop disabled do Pressable
Alternativa mais nova
role / aria-checked
role="radio" com aria-checked; role tem prioridade sobre accessibilityRole
Abaixo está uma versão web do mesmo grupo: ela usa os papéis ARIA correspondentes, então as setas do teclado mudam a escolha como em um conjunto de radios do navegador. Embaixo, o painel mostra as props que cada opção teria no React Native para a seleção atual, para você ver o que é informado ao leitor de tela.
O pai guarda um valor no state; cada opção se compara com ele.
Tocar em uma opção chama onChange com o próprio valor, o que desmarca as outras automaticamente.
Cada Pressable se anuncia como radio e informa checked por meio do accessibilityState.
A View que envolve é marcada como radiogroup e rotulada com a pergunta.
Deixe a linha inteira tocável, incluindo o rótulo, não só o círculo pequeno.
Adicione hitSlop ou padding para que cada alvo seja confortável para o polegar.
Use o flag pressed da função de style para dar retorno instantâneo antes de o state atualizar.
Deixe um padrão pré-selecionado só quando uma resposta for realmente segura; caso contrário, deixe o grupo vazio e valide.
Quando houver mais de umas sete opções, um dropdown costuma funcionar melhor que uma coluna de círculos.
Perguntas frequentes
Existe um componente RadioButton no React Native?
Não. A página oficial de componentes lista Button e Switch como os únicos controles de interface, então os radios vêm do seu próprio código com Pressable ou de um kit de UI que você instala.
Como um leitor de tela sabe que meu círculo é um radio button?
Defina accessibilityRole="radio" no Pressable e accessibilityState={{ checked: isSelected }}. A documentação descreve o papel radio como representando um radio button e radiogroup como um grupo deles.
Devo usar role e aria-checked?
Os dois funcionam. O React Native também aceita role="radio" e aria-checked, e a documentação diz que role tem prioridade sobre accessibilityRole quando os dois estão definidos. Escolha um estilo e use no app inteiro.
Radio buttons ou um Switch?
Um Switch serve para uma configuração de ligar e desligar que vale na hora. Radios servem para escolher exatamente uma entre várias opções com nome.
Por que fazer você mesmo
Um grupo de radio é pouco código: uma linha, dois círculos e uma comparação. Escrever você mesmo significa que ele combina com o seu design, não acrescenta nada ao bundle e carrega exatamente as props de acessibilidade que você escolher.
Guardar o valor selecionado no pai transforma o grupo em um componente controlado, então ele se encaixa no objeto de valores de um formulário assim como um TextInput.
Desenhando o círculo
Use uma View com largura e altura iguais, uma borda e um borderRadius de metade do tamanho para o anel. Dentro, renderize uma View menor preenchida só quando a opção estiver selecionada.
Mantenha o anel visível nos dois estados e mude só o ponto. Uma seleção indicada apenas por cor é difícil de ver para pessoas com daltonismo.
Código do grupo de radio
Componente RadioGroup
Só componentes principais. O pai passa value e onChange, exatamente como em um TextInput controlado.
Usando em uma tela
O state fica na tela, então a escolha pode ser validada e enviada com o resto de um formulário.
Envio padrão
Envio expresso
Retirar na loja
Prévia do grupo de radio
Forma de entrega
Clique em uma opção ou use as setas do teclado quando o grupo estiver em foco.