Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
how to have more than one switch?

I am trying to have more than one switch on the same page, I succeeded but the problem is that when I click on a switch it modifies all the other switches.

Here is my code

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

    const toggleSwitch = (value, nb) => {
        setSwitchValue(value);
  };
    return (
    <View>
        <View style={styles.Container}>
            <Text style={styles.Title}>Change Profil Setting</Text>
        </View>

        <View style={styles.ContainerText}>
            <Text syle={styles.Normal}>Over 18:</Text>
            <Switch
                style={{left: 50}}
                onValueChange={toggleSwitch}
                value={switchValue}
            />
        </View>
        <View style={styles.ContainerText}>
            <Text syle={styles.Normal}>AutoPlay:</Text>
            <Switch
                style={{left: 50}}
                onValueChange={toggleSwitch}
                value={switchValue}
            />
        </View>
        <View style={styles.ContainerText}>
            <Text syle={styles.Normal}>FlexDirecttion:</Text>
            <Switch
                style={{left: 50}}
                onValueChange={toggleSwitch}
                value={switchValue}
            />
        </View>
    </View>
    )
  }
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

const Setting =() => {
const [switchValue, setSwitchValue] = useState(false);
const [switch2Value, setSwitch2Value] = useState(false);
const [switch3Value, setSwitch3Value] = useState(false);
const toggleSwitch = (value, nb) => {
    setSwitchValue(value);
};
const toggle2Switch = (value, nb) => {
    setSwitch2Value(value);
};
const toggle3Switch = (value, nb) => {
    setSwitch3Value(value);
};
return (
<View>
    <View style={styles.Container}>
        <Text style={styles.Title}>Change Profil Setting</Text>
    </View>

    <View style={styles.ContainerText}>
        <Text syle={styles.Normal}>Over 18:</Text>
        <Switch
            style={{left: 50}}
            onValueChange={toggleSwitch}
            value={switchValue}
        />
    </View>
    <View style={styles.ContainerText}>
        <Text syle={styles.Normal}>AutoPlay:</Text>
        <Switch
            style={{left: 50}}
            onValueChange={toggle2Switch}
            value={switch2Value}
        />
    </View>
    <View style={styles.ContainerText}>
        <Text syle={styles.Normal}>FlexDirecttion:</Text>
        <Switch
            style={{left: 50}}
            onValueChange={toggle3Switch}
            value={switch3Value}
        />
    </View>
</View>
)
}

This can be considered as a work around. What I would suggest is wrap the Switch component inside another component and import it where-ever you want by incorporating the state management in that component.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda