title: React Native (with Redux) animate Switch programmatically
body: <p>I have component which has Switch component inside. This whole component is clickable. When you click on this component, it fires dispatch (which modifies redux store) and causes this component to be re-rendered.
  What I need is to not re-render whole component but just to animate that Switch component to proper state.</p>
  
  <p>Something like this</p>
  
  <pre><code>&lt;TouchableOpacity onPress={onPress}&gt;
      &lt;Text&gt;{this.props.title}&lt;/Text&gt;
      &lt;Switch value={this.state.active}/&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Any idea?</p>
  
  <p>I find this pretty common use case and I know I will get to a lot of similar scenarios so I need this behaviour but I can't find any examples or solutions on web. Maybe I am just missing something.</p>
  
  <p>Thanks</p>
  
  <p>--- EDIT ---</p>
  
  <p>I also tried this. I tried to disable updating with shouldComponentUpdate, I tried to set state only in willRecieveProps and/or toggle, even without toggle. I also tried playing with LayoutAnimation. But nothing works. this.setState() just doesn't animate Switch component.
  I also tried playing with this._switch._rctSwitch.setNativeProps({ value: nextProps.active }) but this doesn't work either (and it smells because of _rctSwitch).</p>
  
  <pre><code>class ViewWithSwitchInside extends React.Component {
      constructor(props) {
          super(props)
          this.toggle = this.toggle.bind(this);
          this.state = {
              active: props.active
          }
      }
  
      componentWillReceiveProps(nextProps) {
          if (this.state.active != nextProps.active) {
              this.setState({ active: nextProps.active })
          }
      }
  
      toggle() {
          let newValue = !this.state.active
          this.setState({
              active: newValue,
          })
          if (typeof this.props.onClick === 'function') {
              this.props.onClick(newValue)
          }
      }
  
      render() {
          return (
              &lt;TouchableWithoutFeedback onPress={this.toggle}&gt;
                  &lt;View&gt;
                      &lt;Text&gt;{this.props.title}&lt;/Text&gt;
                      &lt;Switch value={this.state.active} /&gt;
                  &lt;/View&gt;
              &lt;/TouchableWithoutFeedback&gt;
          )
      }
  }
  </code></pre>