Conditional rendering else statement does not apply the styles to my component

Question

I ran into this strange problem where I am dynamically rendering "no current trail" if the user does not have a trail selected but if the user does I want to render some stuff about trail info and buttons. All of this is wrapped in a "currentTrailBottomSheetContainer" style. For some reason the style only gets applied to the True statement if currentTrail == undefined but the "currentTrailBottomSheetContainer" style does not get applied if the statement is false even though the false statement is still wrapped in the . Does anyone know what could be going wrong?

TSX CODE:

<View style={styles.currentTrailBottomSheetContainer}>
            {currentTrail == undefined ? (
              <Text style={styles.currentTrailBottomSheetText}>No Current Trail</Text>
            ) : (
              <View style={styles.currentTrailContainer}>
                <View style={styles.currentTrailTextContainer}>
                  <Text style={styles.currentTrailBottomSheetText}>{currentTrail.trailName}</Text>
                </View>
                <View style={styles.currentTrailSettingsContainer}>
                  <TouchableOpacity style={styles.currentTrailInfoButton}>
                    <Text style={{ textAlign: "center" }}>INFO</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.currentTrailEditButton}>
                    <Text style={{ textAlign: "center" }}>EDIT</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.currentTrailRemoveButton}>
                    <Text style={{ textAlign: "center" }}>X</Text>
                  </TouchableOpacity>
                </View>
              </View>
            )}
          </View>

Styling that wraps the conditional render.

currentTrailBottomSheetContainer: {
    height: "auto",
    width: "100%",
    marginBottom: 20,
    borderWidth: 5,
  },

currentTrailContainer: { flex: 1, flexDirection: "column", alignContent: "space-between", justifyContent: "space-between", },

image of border working like it should (Thick black border)

image of border not wrapping the current trail part of the view (Thick Black Border)

I expect the border around "Test 1" and the "| Info | Edit | X |" just like the border around "No Current Trail"

Answer 1

Add flex: 0 to currentTrailContainer (example)

import {
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import { useState } from 'react';

export default function App() {
  const [currentTrail, setCurrentTrail] = useState(true);
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity
        style={styles.currentTrailInfoButton}
        onPress={() => {
          setCurrentTrail(() => !currentTrail);
        }}>
        <Text style={{ textAlign: 'center' }}>Toggle</Text>
      </TouchableOpacity>

      <View style={styles.currentTrailBottomSheetContainer}>
        {currentTrail ? (
          <Text style={styles.currentTrailBottomSheetText}>
            No Current Trail
          </Text>
        ) : (
          <View style={styles.currentTrailContainer}>
            <View style={styles.currentTrailTextContainer}>
              <Text style={styles.currentTrailBottomSheetText}>
                {currentTrail.trailName}
              </Text>
            </View>
            <View style={styles.currentTrailSettingsContainer}>
              <TouchableOpacity style={styles.currentTrailInfoButton}>
                <Text style={{ textAlign: 'center' }}>INFO</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.currentTrailEditButton}>
                <Text style={{ textAlign: 'center' }}>EDIT</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.currentTrailRemoveButton}>
                <Text style={{ textAlign: 'center' }}>X</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  currentTrailBottomSheetContainer: {
    height: 'auto',
    width: '100%',
    marginBottom: 20,
    borderWidth: 5,
  },
  currentTrailContainer: {
    flex: 0, // Add flex:0 this will ensure that the view will get the space it requires
    flexDirection: 'column',
    alignContent: 'space-between',
    justifyContent: 'space-between',
  },
});