title: How to preserve native animation of Switch?
body: <p>I'd like to create a basic "setting toggle" component, with Title and Subtitle on the left, and a Switch on the right. I'd like to be able to switch the toggle when the whole component is clicked, not just when the switch is. </p>
  
  <p>In order to achieve this is wrapped the component in a Touchable and execute the supplied onValueChange callback, so the container component can handle the state change of the switch.</p>
  
  <pre><code>export default function SettingToggle({
    title,
    subtitle,
    toggled,
    onValueChange,
  }) {
    return (
      &lt;TouchableWithoutFeedback
        style={styles.container}
        onPress={() =&gt; onValueChange(!toggled)}
      &gt;
        &lt;View&gt;
          &lt;Text style={styles.title}&gt;{title}&lt;/Text&gt;
          &lt;Text style={styles.subtitle}&gt;{subtitle}&lt;/Text&gt;
        &lt;/View&gt;
        &lt;Switch
          value={toggled}
          onValueChange={value =&gt; onValueChange(value)}
        &gt;&lt;/Switch&gt;
      &lt;/TouchableWithoutFeedback&gt;
    )
  }
  </code></pre>
  
  <p>Now when I click the Switch, it animates nicely to the other value, but when click the component, the whole component redrawn with the new value of {toggled}, thus on the UI it feels like the switch is instantly changing to the other value.</p>
  
  <p><strong>Question 1</strong>: How could I preserve the animation even when the component is clicked, and not just the Switch?</p>
  
  <p><strong>Question 2</strong>: From where does React know, that it doesn't need to redraw the view when only the Switch is clicked? The render() method is called, as the parent component's state changes with the onValueChange call, so the SettingToggle is rerendered with a new {toggled} value. I assume the view is "recreated" but under the hood React probably isn't changing the view in the hierarchy with the newly created one, as it somehow knows that it is not needed. How does this work?</p>