Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!