View scrolling beyond content

[designsheikh]

The view is being allowed to scroll up further than the actual height of the content which in turn leaves quite a large blank space below. I already have a view wrapping the Triggering View, but the same problem still occurs. See image and code below

<ImageHeaderScrollView
      maxHeight={250}
      minHeight={Platform.OS === 'ios' ? 90 : 55}
      headerImage={{ uri: cityImage }}
      maxOverlayOpacity={1}
      overlayColor="#fff"
      style={{marginBottom: 20}}
      showsVerticalScrollIndicator={true}
    >
      <View style={{height: 550}}>
        <TriggeringView>
          <Animatable.View animation={'fadeIn'} duration={1650} style={{marginTop: 30, marginHorizontal: 20}}>
            <Text style={styles.title}>{cityName}</Text>
            {countryLocation && (
              <Animatable.View animation={'fadeIn'} duration={1000} style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, marginRight: 20 }}>
                <EvilIcons name="location" size={20} color="#5d5d5d" style={{ marginLeft: -5 }} />
                <Text style={{ color: '#999', fontFamily: 'Gilroy-Medium' }}>
                  {countryLocation.location}, {countryLocation.country}
                </Text>
              </Animatable.View>
            )}

            { tags && (
              <>
              <Divider style={{marginTop: 15}}/>
                <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 15, justifyContent: 'space-between'}}>
                {Object.entries(tags).map(([key, value], index) => (
                  <Animatable.View animation={'fadeIn'} duration={1000 + index * 200}  key={index} style={{marginRight: 8, alignItems: 'center'}}>
                      <Text style={{ fontFamily: 'Gilroy-Semibold', fontSize: 15, marginBottom: 5 }}>
                        {key.charAt(0).toUpperCase() + key.slice(1)} {/* Capitalizes the first letter of the key */}
                      </Text>
                      <Text style={{ fontFamily: 'Gilroy-Regular', fontSize: 13 }}>{value}</Text>
                  </Animatable.View>
                  ))}
                </View>
              </>
            )}
              <Divider style={{marginTop: 15}}/>
          </Animatable.View>
        </TriggeringView>
          <ScrollView style={{marginHorizontal: 20, marginTop: 10}} showsVerticalScrollIndicator={false}>
            {countryDesc && (
              <View style={{ marginTop: 10 }}>
                <Animatable.Text
                  animation="fadeIn"
                  duration={1000}
                  style={styles.subHeading}
                >
                  Description
                </Animatable.Text>
                <Animatable.Text
                  animation="fadeIn"
                  duration={1100}
                  style={styles.countryDesc}
                  numberOfLines={showFullDesc ? undefined : 3} // undefined removes the limit
                >
                  {countryDesc}
                </Animatable.Text>
                {countryDesc.length > 100 && (
                  <TouchableOpacity onPress={toggleDescription}>
                    <Text style={styles.readMoreText}>
                      {showFullDesc ? 'Read Less' : 'Read More'}
                    </Text>
                  </TouchableOpacity>
                )}
              </View>
            )}
            {/* Itinerary */}
            {itinerary.length > 0 && (
              <>
                <Divider style={{ marginVertical: 25 }} />
                <Animatable.Text animation={'fadeIn'} duration={1300} style={styles.suggestedItinerary}>
                  Itinerary For You
                </Animatable.Text>

                <View style={{ marginTop: 20 }}>
                  {itinerary.map((rowData, index) => (
                    <Animatable.View animation={'fadeIn'} duration={1100 + index * 200} key={index}>
                      <ItineraryAccordion
                        day={rowData.title} // Pass day as "Day 1", "Day 2" etc.
                        activity={rowData.activity}
                        restaurant={rowData.restaurant}
                      />
                    </Animatable.View>
                  ))}
                </View>
              </>
            )}
          </ScrollView>
      </View>
    </ImageHeaderScrollView>
    <View style={{marginBottom: 35, alignItems: 'center'}}>
      <View style={{}}>
        <TouchableOpacity style={{backgroundColor: '#2970ff', padding: 15, alignItems: 'center',borderRadius: 10, width: 350, paddingVertical: 15}}>
          <Text style={{fontFamily: 'Gilroy-Bold', fontSize: 18, color: '#fff', letterSpacing: -0.5, }}>Book Now</Text>
        </TouchableOpacity>
      </View>
    </View>