title: how to keep the style if disable objects in react native?
body: <p>I am trying to structure my problem: <br>
  <strong>What am I working on:</strong> I am trying to do a an opening hours view in react-native (typescript) where you can turn the weekdays on and off. And for the days where it is on you can set the opening hours via time picker. Just like the one of Google that you see here: <a href="https://i.stack.imgur.com/EZRYN.png" rel="nofollow noreferrer">Google Opening hours</a></p>
   <br> 
  <p><strong>What is my problem:</strong> I ran now into a styling issues. When I switch off a day the whole content jumps to the right. How should I structure and style my components?</p>
  <p><a href="https://i.stack.imgur.com/PlITX.png" rel="nofollow noreferrer">My Opening Hours View</a></p>
   <br> 
  Here is my code
  <pre><code>interface Props {
    day: String;
  }
  
  export function OpenTimesItem(props: Props) {
    const [isOn, setOn] = useState(true);
    const toggleOn = () =&gt; setOn(!isOn);
  
    return (
      &lt;View style={styles.dayContainer}&gt;
        &lt;Text&gt;{props.day}&lt;/Text&gt;
        &lt;View&gt;
          &lt;Switch value={isOn} onValueChange={toggleOn} /&gt;
          &lt;Text&gt;{isOn ? &quot;Geöffnet&quot; : &quot;Geschlossen&quot;}&lt;/Text&gt;
        &lt;/View&gt;
        {isOn ? (
          &lt;View style={styles.timePicker}&gt;
            &lt;TimePicker /&gt;
            &lt;Text&gt;-&lt;/Text&gt;
            &lt;TimePicker /&gt;
          &lt;/View&gt;
        ) : (
          &lt;View style={styles.timePicker}&gt;&lt;/View&gt;
        )}
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    dayContainer: {
      borderBottomWidth: 1,
      borderBottomColor: &quot;#D1D1D1&quot;,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;space-between&quot;,
      flexDirection: &quot;row&quot;,
    },
    timePicker: {
      flexDirection: &quot;row&quot;,
      alignItems: &quot;center&quot;,
    },
  });
  
  </code></pre>