extend <View> according to components inside it

Question

In my containerTop, I am rendering a list inside TripOptionsSelector that hides towards the end.

I have tried adding marginBottom/paddingBottom to containerOptionsSelector but it makes no difference. I don't want to add a height to my because it can vary according to different phones.

How else can I simply extend the View such that the text doesn't hide?

export const MapScreen: React.FunctionComponent = () => {
  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
      <View style={styles.containerTop}>
          <BackArrow />
          <JourneyLocationsTextContainer />
          <View style={styles.containerOptionsSelector}>
            <TripOptionsSelector />
          </View>
        </View>
        <View style={styles.containerMap}>
          <MapContainer />
          <ButtonsContainer />
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeAreaViewContainer: { flex: 1 },
  container: {  flex: 1, backgroundColor: 'white'},
  containerTop: { flex: 1, backgroundColor: '#323443' },

  containerOptionsSelector: {
    marginTop: moderateScale(15),
    marginLeft: moderateScale(20),
  },
  containerMap: { 
    flex: 2
  },
});

export const TripOptionsSelector: React.FunctionComponent = () => {
  return (
    <View style={styles.offerContainer}>
      <Text style={styles.offerText}>Jetzt</Text>
      <Text style={styles.offerText}>1 Person</Text>
      <Text style={styles.offerText} >Filter</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  offerContainer: {
    flexDirection: 'row',
  },

Answer 1

You just remove flex from styles.containerTop - so it's sized based purely on its content.