onChangeChecked (obrigatório): uma função que será chamada quando o botão for pressionado. Ela recebe um único parâmetro, que é o novo valor do botão (booleano).

testID (opcional): um identificador de teste que pode ser usado para localizar este componente nos testes automatizados.

Como utilizar o componente

O componente Toggle pode ser importado em outros arquivos JavaScript/TypeScript da seguinte forma:

import { Toggle } from './caminho/para/o/componente';

Para utilizar o componente, basta adicioná-lo ao código JSX, como no exemplo abaixo:

Propriedades do componente

isChecked

O valor booleano que indica se o botão está ligado ou desligado. O valor padrão é false.

onChangeChecked

A função que será chamada quando o botão for pressionado. Ela recebe um único parâmetro, que é o novo valor do botão (booleano).

testID

O identificador de teste que pode ser usado para localizar este componente nos testes automatizados.

Funcionamento do componente

O componente Toggle utiliza a biblioteca react-native para criar uma animação de transição quando o botão é pressionado. Quando o botão está ligado, a animação move o controle deslizante para a direita. Quando o botão está desligado, a animação move o controle deslizante para a esquerda.

A propriedade isChecked determina se o botão está ligado ou desligado. Quando essa propriedade é alterada, o componente chama a função handleAnimationToggle para atualizar a animação do controle deslizante.

A propriedade onChangeChecked é chamada sempre que o botão é pressionado. Essa função deve ser definida pelo usuário do componente e deve atualizar o estado do componente de acordo com o novo valor do botão. Quando o estado é atualizado, a propriedade isChecked é atualizada, e a animação do controle deslizante é atualizada também.

Exemplo completo

import React, { useState } from 'react';

import { View, Text } from 'react-native';

import { Toggle } from './caminho/para/o/componente';

const App = () => {

const [isEnabled, setIsEnabled] = useState(false);

const handleToggle = (value) => {

setIsEnabled(value);

};

return (

<Text>{isEnabled ? 'Ligado' : 'Desligado'}</Text>

</View>

);

};

export default App;

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.