how to keep the style if disable objects in react native?

I am trying to structure my problem:
What am I working on: 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: Google Opening hours

What is my problem: 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?

My Opening Hours View

interface Props {  day: String;}export function OpenTimesItem(props: Props) {  const [isOn, setOn] = useState(true);  const toggleOn = () => setOn(!isOn);  return (<View style={styles.dayContainer}><Text>{props.day}</Text><View><Switch value={isOn} onValueChange={toggleOn} /><Text>{isOn ? "Geöffnet" : "Geschlossen"}</Text></View>      {isOn ? (<View style={styles.timePicker}><TimePicker /><Text>-</Text><TimePicker /></View>      ) : (<View style={styles.timePicker}></View>      )}</View>  );}const styles = StyleSheet.create({  dayContainer: {    borderBottomWidth: 1,    borderBottomColor: "#D1D1D1",    alignItems: "center",    justifyContent: "space-between",    flexDirection: "row",  },  timePicker: {    flexDirection: "row",    alignItems: "center",  },});