Can I change switch value programmatically?

[cnakh]

Your component is very nice.

I have two toggle switch, if one on, the other one is off.
So when I click on the toggle switch it trigger the other to change it state.

How can I make the switch change value and animate by programmatically?

[poberwong]

emmming, I will do it recently and please give me some time.

[poberwong]

It's unnecessary to add animation when changing value programmatically. If u have to do it, the following code should be done:

  componentWillReceiveProps (nextProps) {
    if (nextProps === this.props) {
      return
    }

    // componentWillReceiveProps will still be triggered if
    // render function of father component is triggered.
    // Thus, toggleSwitch will be executed without two-way bind.
    if (typeof nextProps.value !== 'undefined' && nextProps.value !== this.props.value) {
      this.animateHandler(this.handlerSize * SCALE, () => {
        this.toggleSwitch(true)
      })
    }
  }

The SCALE is a variable valued 6 / 5.
If you want to prolong time of handler which is circle, you can use setTimeout in callback of animatedHandler,like following:

this.animateHandler(this.handlerSize * SCALE, () => {
  setTimeout(() => {
    this.toggleSwitch(true)
  }, yourTime)
})

[diaojinggang]

I think I already did what @cnakh wanted in Nov, 2017. switch1 shows myState1, switch2 shows myState2. When switch1 is toggled, this.setState({myState1:val}); if(val == true) {this.setState({myState2:false})}. Apply the same logic to switch2. Isn't the idea just like this?

[ayberkanilatsiz]

@cnakh yes you can.

you need to ref the comp. Ex:

<Switch ref={ (comp) => this['switch'] = comp } value={value} onSyncPress={onValueChange} />

changeValue = (value) => { this.switch.toggleSwitchToValue(true,value); }

when you call the changeValue function, your switch will change.

@diaojinggang when you update state all page will be rendered again. It can not be necessary but if you have many switch your state will be too crowded. I think the best way is the ref.