Im trying to create 2 dropdown menus where depending on which are clicked would reduce a third view's flex number to accommodate the other 2 expanded views. Im using two useState variables to keep track of the 2 different dropdown menus, and calculate the flex as shown:

const [isFirstExpanded, setIsFirstExpanded] = useState(false)
const [isSecondExpanded, setIsSecondExpanded] = useState(false)

const calculateFlex = () => {
    if (isFirstExpanded && isSecondExpanded) {
        return 0; // This means both dropdowns are expanded, and should hide the third view
    } else if (isFirstExpanded || isSecondExpanded) {
        return 2; // Only one of the dropdowns are open, so half the size of the third view
    } else {
        return 4; // None of the dropdowns are open, so show the full view
    }
}
<View style={{flex: 1}}>
    <View style={{flex: calculateFlex, backgroundColor: "red"}}/> // View to be grown or shrunk depending on below views

    <TouchableOpacity style={{flex: 1}} onPress={setIsFirstExpanded(!isFirstExpanded)}/>
    <View style={isFirstExpanded ? styles.expandView : styles.hideView}/> // The dropdown that is hidden by default

    <TouchableOpacity style={{flex: 1}} onPress={setIsSecondExpanded(!isSecondExpanded)}/>
    <View style={isSecondExpanded ? styles.expandView : styles.hideView}/> // The dropdown that is hidden by default
</View>

This code leaves out some innocuous things, if needed I can copy/paste them. My problem occurs when the first view to be grown or shrunk doesn't seem to follow the calculate flex function. Not sure why, or if there is a better way to calculate this.