DEV Community

Criando seu próprio componente CheckBox no React Native

AlanRmachado on April 12, 2020

Eae Reacteros, bora criar um checkbox maneiro e usá-lo em tudo quanto é lugar ? Entããããããããoooo... Vamos lá! Introdução Eu sou um grand...

Read full post

Simone • Oct 1 '22

muito boommm!
Obrigada

AlanRmachado • Oct 5 '22

Eu quem agradeço :)

Arley Souto • Nov 17 '22

Muito obrigado, me ajudou bastante.

Joel crescêncio de lima sena • Jul 16 '20

Opa Alan, como ficaria se fosse múltiplos checkBox e eu precisasse mandar eles para um backend?

AlanRmachado • Jul 21 '20 • Edited

Opa, blz?

Cara, existe algumas formas... A mais simples na minha opinião é o seguinte:

cria um objeto como estado, tipo assim :

const [allChecks, setCheck] = useState({});

cria uma função para abastecer esse objeto :

function handleChecks( property ) {
const obj = allChecks
obj[property] = !obj[property];
setCheck(obj)
}

O parâmetro property vai ser o nome do checkbox. Veja que eu criei dois checkbox, e disse que o valor de um eh check1 e do outro é check2

label="check1"
labelStyle={{ color: '#fff', fontSize: 16 }}
iconColor="#fff"
checkColor="#fff"
value={allChecks.check1}
onChange={()=>handleChecks('check1')}
/>

label="check2"
labelStyle={{ color: '#fff', fontSize: 16 }}
iconColor="#fff"
checkColor="#fff"
value={allChecks.check2}
onChange={()=>handleChecks('check2')}
/>

no final, seu objeto estará igual aos seus checks.

Dica, inicia esse objeto já com todos os checks e seus valores,
mesmo que seja false.