CODEWITHSUNDEEP
react-nativereact-native-flatlist
Dogla305
Dogla305

Reputation: 87

React-Native FlatList ListHeaderComponent ignores shouldComponentUpdate

In React-Native, using a FlatList with a ListHeaderComponent lets me to believe that the shouldComponenupdate function in the ListHeaderComponent (though executed) is ignored. My component always rerenders even though I return false in shouldComponentUpdate. How would I stop the ListHeaderComponent from rerendering?

<Card>
     <FlatList data={comments}
              ListHeaderComponent={() => <PostHeader navigation={this.props.navigation} post={this.props.post} />}
              style={{flex:1}}
              onRefresh={() => this.props.getPost(mediaId, 'newsfeed', true)}
              refreshing={isRefreshing}
              keyExtractor={(comment) => comment.id}
              removeClippedSubviews={false}
              renderItem={(comment) => <Comment comment={comment.item} /> } />

    <PostComment newComment={newComment}
                 postComment={() => this.props.postComment(newComment.content, mediaId, profile.id)}
                 reset={()=> this.props.resetNewComment}
                 onTextChange={this.props.newCommentTextChanged} />
    {Platform.OS.toLocaleLowerCase() === 'ios' &&
    <KeyboardSpacer />
    }
  </Card>

Placing the before the FlatList stops the undesired behavior, but this would require wrapping the lot in a ScrollView which I rather avoid when using a FlatList.

Upvotes: 3

Views: 7562

Answers (1)

Dogla305
Dogla305

Reputation: 87

Turns out, it wasn't rerendering, it was unmounting en mounting my component due to this:

https://github.com/facebook/react-native/issues/13602#issuecomment-300608431

Upvotes: 3

Related Questions