On React-Native, I'm trying to create a screen with multiple switch ponents, with the possibility of selecting only one at once. When the ponent loads, only the first switch in on. if you click on it, it turns to off, but if you turn on another one, all the others turn to off.

I'm not sure I have the right approach here, as I'm confused about how to use the ponent state to do this.

In JS, I would do something like a function that turns all switch to off, but turn on the clicked one, but I don't understand how to this with state.

thanks in advance

import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'

class switchScreen extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false
    }
  }

  switch = (value) => {
    this.setState({ falseSwitchIsOn: value, trueSwitchIsOn: !value })
  }

  render () {
    return (
      <View>
        <Switch
          onValueChange={this.switch}
          value={this.state.trueSwitchIsOn}
        />
        <Switch
          onValueChange={this.switch}
          value={this.state.falseSwitchIsOn}
        />
        <Switch
          onValueChange={this.switch}
          value={this.state.falseSwitchIsOn}
        />
      </View>
    )
  }
}

On React-Native, I'm trying to create a screen with multiple switch ponents, with the possibility of selecting only one at once. When the ponent loads, only the first switch in on. if you click on it, it turns to off, but if you turn on another one, all the others turn to off.

I'm not sure I have the right approach here, as I'm confused about how to use the ponent state to do this.

In JS, I would do something like a function that turns all switch to off, but turn on the clicked one, but I don't understand how to this with state.

thanks in advance

import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'

class switchScreen extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false
    }
  }

  switch = (value) => {
    this.setState({ falseSwitchIsOn: value, trueSwitchIsOn: !value })
  }

  render () {
    return (
      <View>
        <Switch
          onValueChange={this.switch}
          value={this.state.trueSwitchIsOn}
        />
        <Switch
          onValueChange={this.switch}
          value={this.state.falseSwitchIsOn}
        />
        <Switch
          onValueChange={this.switch}
          value={this.state.falseSwitchIsOn}
        />
      </View>
    )
  }
}

• javascript
• reactjs
• react-native

Share Improve this question Follow asked May 29, 2017 at 23:23 Aure RAure R 3311 silver badge33 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I believe a more optimal solution would minimize the amount of state, and possibility of inconsistent data. Using one state variable to keep track of which switch is active (if any) can solve your problem pretty easily.

import React from 'react'
import { ScrollView, Text, View, Switch } from 'react-native'

class switchScreen extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      activeSwitch: null,
    }
  }

  // A simple toggle method that takes a switch number
  // And toggles it between on / off
  toggleSwitch = (switchNumber) => {
    this.setState({
      activeSwitch: switchNumber === this.state.activeSwitch ? null : switchNumber
    })
  };

  // 
  switchOne = (value) => { this.toggleSwitch(1) };
  switchTwo = (value) => { this.toggleSwitch(2) };
  switchThree = (value) => { this.toggleSwitch(3) };

  render () {
    return (
      <View>
        <Switch
          onValueChange={this.switchOne}
          value={this.state.activeSwitch === 1}
        />
        <Switch
          onValueChange={this.switchTwo}
          value={this.state.activeSwitch === 2}
        />
        <Switch
          onValueChange={this.switchThree}
          value={this.state.activeSwitch === 3}
        />
      </View>
    )
  }
}

    import React from 'react'
    import { ScrollView, Text, View, Switch } from 'react-native'

    class switchScreen extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          switchone:false,
          switchtwo:false,
          switchthree:false,

        }
      }

      switchOne = (value) => {
        this.setState({ switchone: !value,
         switchtwo:false,switchthree:false,
         })
      }
 switchTwo = (value) => {
        this.setState({ switchtwo: !value,
         switchone:false,switchthree:false,
         })
      }
 switchThree = (value) => {
        this.setState({ switchtree: !value,
         switchone:false,switchtwo:false,
         })
      }

      render () {
        return (
          <View>
            <Switch
              onValueChange={this.switchOne}
              value={this.state.switchone}
            />
            <Switch
              onValueChange={this.switchTwo}
              value={this.state.switchtwo}
            />
            <Switch
              onValueChange={this.switchThree}
              value={this.state.switchthree}
            />
          </View>
        )
      }
    }

You can try something like below, you can keep array of switch states, in the example its an associative key, but you can change according to your need, with multi level switch states. (pardon the code formatting but it give you the idea)

constructor(props) {
super(props);
this.state = {
  switchStates: {
    panyName: true
  }
}
}

toggle(item, index) {
const switchStates = this.state.switchStates;
switchStates[index] = !switchStates[index];
console.log(switchStates);
this.setState({ switchStates });}

render switch

<Switch
    onValueChange={isSwitchOn =>
    this.toggle({ isSwitchOn }, "panyName")
    }
    value={this.state.switchStates.panyName}
/>

For react native 0.73 and above

render switch

 <Switch
      trackColor={{false: '#E4E4E4', true: '#8C7AFF'}}
      thumbColor={isEnabledPushNotifications[switchNumber] ? '#FFFFFF' : '#8C7AFF'}
      ios_backgroundColor="#E4E4E4"
      onValueChange={() => togglePushNotifications(switchNumber)}
      value={isEnabledPushNotifications[switchNumber]}
    />

for saving state in array and updating of particular switchNumber in array

const [isEnabledPushNotifications, setIsEnabledPushNotifications] = useState([]);

const togglePushNotifications = (switchNumber) => {
   
var arr = [...isEnabledPushNotifications]

if (isEnabledPushNotifications[switchNumber]){
  arr[switchNumber] =  !arr[switchNumber]
}else{
  arr[switchNumber] = true
}
setIsEnabledPushNotifications(arr)  }