Tabs.FlatList is not showing `sometimes`, it's got hidden.

[linuxhackr]

trafficstars

Current behavior

Tabs.FlatList is not showing sometimes, it's got hidden. When I don't use renderHeader or HeaderComponent, it's working fine.

Expected behaviour

No message showing in log, only it'd hidden sometime. I use React Navigation's stack navigator

Code sample

 <Tabs.Container
        // renderHeader={(p) => <ProfileHeader {...p}/>}
        // headerHeight={undefined} // optional
        lazy
        // minHeaderHeight={statusBarHeight}
        tabBarHeight={48}
        renderTabBar={props =>
            <MaterialTabBar {...props}
                            style={{backgroundColor: theme.colors.surface, color: theme.colors.text}}
                            labelStyle={{color: theme.colors.text}}
                            indicatorStyle={{backgroundColor: theme.colors.primary}}/>}
    >
        <Tabs.Tab name="Posts">
            <Tabs.FlatList
                data={userPosts.posts}
                ListHeaderComponent={isMineProfile ? () => <CreatePostBanner theme={theme} createProgress={createProgress}
                                                             navigation={navigation}/> : null}
                renderItem={({item}) => <PostItem post={item} navigation={navigation}/>}
                keyExtractor={(post) => post.id + "Posts"}
                onEndReachedThreshold={0.2}
                onEndReached={() => onLoadMore('USER_POSTS')}
                ListEmptyComponent={<View><ProgressBar indeterminate
                                                       visible={userPosts.progress && userPosts.posts.length === 0}/></View>}
                ListFooterComponent={<View><ProgressBar indeterminate
                                                        visible={userPosts.progress && userPosts.posts.length > 0}/></View>}
                nestedScrollEnabled

            />
        </Tabs.Tab>
        <Tabs.Tab name="Comments">
            <Tabs.FlatList
                data={userCommentedPosts.posts}
                renderItem={({item}) => <PostItem post={item} navigation={navigation}/>}
                keyExtractor={(post) => post.id + "Comments"}
                onEndReachedThreshold={0.2}
                onEndReached={() => onLoadMore('COMMENTED_POSTS')}
                ListEmptyComponent={<View><ProgressBar indeterminate
                                                       visible={userCommentedPosts.progress && userCommentedPosts.posts.length === 0}/></View>}
                ListFooterComponent={<View><ProgressBar indeterminate
                                                        visible={userCommentedPosts.progress && userCommentedPosts.posts.length > 0}/></View>}
                nestedScrollEnabled

            />
        </Tabs.Tab>
        <Tabs.Tab name="Likes">
            <Tabs.FlatList
                data={userLikedPosts.posts}
                renderItem={({item}) => <PostItem post={item} navigation={navigation}/>}
                keyExtractor={(post) => post.id + "Likes"}
                onEndReachedThreshold={0.2}
                onEndReached={() => onLoadMore('LIKED_POSTS')}
                ListEmptyComponent={<View><ProgressBar indeterminate
                                                       visible={userLikedPosts.progress && userLikedPosts.posts.length === 0}/></View>}
                ListFooterComponent={<View><ProgressBar indeterminate
                                                        visible={userLikedPosts.progress && userLikedPosts.posts.length > 0}/></View>}
                nestedScrollEnabled

            />
        </Tabs.Tab>
    </Tabs.Container>`

[justinjoyn]

Setting a fixed height to the header component and providing the headerHeight prop fixed this for me.

[theshadowagent]

For me Tabs.FlatList was hidden on all tabs except the first one because of width: 100% CSS style. I removed the style, and it was fixed. Also, FlatList still has the desired full-screen width 🎉

[Mehdi-KHALFALLAH]

Setting a fixed height to the header component and providing the headerHeight prop fixed this for me.

I confirm, setting a fixed headerHeight prop solved this annoying bug for me. it took me a month to fix it