Switch

O componente Switch em React Native é uma caixa de seleção alternável que representa um estado ativado ou desativado. É uma maneira comum de permitir aos usuários ativar ou desativar configurações ou funcionalidades no aplicativo. Aqui está um exemplo básico de como usar o componente Switch:

import React, { useState } from 'react';
import { View, Switch, StyleSheet, Text } from 'react-native';

const MeuComponente = () => {
  const [switchValue, setSwitchValue] = useState(false);

  const toggleSwitch = () => {
    setSwitchValue(!switchValue);
  };

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={switchValue ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={switchValue}
      />
      <Text>Estado do Switch: {switchValue ? "Ativado" : "Desativado"}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MeuComponente;

Neste exemplo, o componente Switch é usado para criar um interruptor com um rótulo indicando seu estado. O estado switchValue é controlado usando o hook useState. Quando o usuário toca no interruptor, a função toggleSwitch é chamada, alternando o valor do estado entre true e false.

Props Importantes do Switch:

• value: O valor do estado do interruptor (deve ser controlado usando um estado).
• onValueChange: Função chamada quando o valor do interruptor é alterado.
• trackColor: Objeto que define as cores de fundo da trilha do interruptor para estados ativados (true) e desativados (false).
• thumbColor: Cor do polegar (o botão do interruptor) quando está na posição ativada.
• ios_backgroundColor: Cor de fundo do interruptor no iOS.

O componente Switch é amplamente utilizado em aplicativos React Native para criar opções de alternância. Ele fornece uma maneira intuitiva para os usuários interagirem com configurações ou funcionalidades específicas do aplicativo.