CODEWITHSUNDEEP
cssreactjsreact-nativereact-native-flatlist
Krilo Max
Krilo Max

Reputation: 275

Elements before FlatList are fixed on a page and doesn't scroll with FlatList

I have a flatlist element and another element before flatlist. When I scroll up, the element before flatlist doesn't go up and is fixed. Is there a way to make it go up when faltlist is scrolled up?

Example:

  render() {
    return (
<View style={styles.container}>
<View>THIS ELEMENT BEFORE CONTAINER STAYS FIXED WHEN SCROLLING FLATLIST</View>
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
<View>
    );
  }

Upvotes: 3

Views: 1885

Answers (1)

Jannik S.
Jannik S.

Reputation: 901

If I do understand you correctly you want to have your view on top be a part of the scrollable area of your FlatList. So you may want to make the view on top the ListHeaderComponent

 renderListHeader = () => {
    return (
      <View>
        <Text>Foo</Text>
      </View>
     );
 }

 render() {
   return (
     <FlatList
       data={this.props.data}
       extraData={this.state}
       keyExtractor={this._keyExtractor}
       renderItem={this._renderItem}
       ListHeaderComponent={this.renderListHeader}
     />
   );
}

Upvotes: 4

Related Questions