React Native FlatList 不会滚动到 header 组件的末尾

Question

I'm having trouble getting my FlatList to scroll to the end of the header. This is what my component's styles are right now:

    <View style={styles.mainView}>
      <View style={{flex: 1}}>
        <FlatList
          ListHeaderComponent={
            <>
              <View style={{minHeight: '40%'}}>
                <MapView
                  region={region}
                  showsUserLocation={true}
                  showsCompass={false}
                  style={styles.map}
                  provider={PROVIDER_DEFAULT}
                  scrollEnabled={true}
                  maxDelta={0.5}
                />
              </View>

              <View>
                <TextInput placeholder="Street address" />
                <TextInput placeholder="Apt/Sut/Bldg" />
                <TextInput placeholder="City" />
                <TextInput placeholder="State" />
                <TouchableOpacity>
                  <Text>Save</Text>
                </TouchableOpacity>
              </View>
            </>
          }
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  mainView: {
    height: devDims.height,
    width: devDims.width,
    backgroundColor: '#ffffff',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    maxHeight: devDims.height,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
});

I've tried switching to a ScrollView but the same problem occurs. Basically, I can scroll to the bottom of the header and see the content, but when I release my finger it immediately scrolls back to the top. What could be wrong with my styling?

It should be noted that devDims is simply the dimensions of the device.

Answer 1

When you use any scrollview or faltlist, you have to use {{flexGrow:1}} property of style which can cover all screen.

 <ScrollView contentContainerStyle={{flexGrow:1}}>
  </ScrollView>

or

 <FlatList contentContainerStyle={{flexGrow:1}}>
  </FlatList >

flexGrow

contentcontainerstyle