Default loading indicator is not showing

[doolb14]

this is my element

import {FlatList as BidirectionList} from 'react-native-bidirectional-infinite-scroll';
<BidirectionList
        ref={listRef}
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        onStartReached={onStartReached}
        onEndReached={onEndReached}
        showDefaultLoadingIndicators={true}
        onStartReachedThreshold={10}
        onEndReachedThreshold={10}
        activityIndicatorColor={'black'}
      />

[vishalnarkhede]

Hey @doolb14 could you please share some screenrecording?

[doolb14]

https://user-images.githubusercontent.com/29996189/120890914-578dd500-c623-11eb-8ef6-18c84b30e25d.mp4

[IamDhana]

I'm also facing the same issue

       const loadMoreOlderMessages = async () => {
            if ((nextPage > 0 && !messagesLoader)) {
               // Calling the API here
            }
         };

        <FlatList
            inverted
            contentContainerStyle={{flexGrow: 1, marginBottom: wp(20)}}
            showsVerticalScrollIndicator={false}
            keyExtractor={(item) => item.toString()}
            data={messageList}
            renderItem={({item}) => (
              <MessageBubble
                item={item}
              />
            )}
            onEndReached={loadMoreOlderMessages}
            onEndReachedThreshold={50}
            showDefaultLoadingIndicators={true}
         />

[vishalnarkhede]

@doolb14 can you share your code for this FlatList component?

[IamDhana]

@vishalnarkhede May I know what's the issue in my code?

[vishalnarkhede]

@IamDhana its a bit hard to say. Inside loadMoreOlderMessages, are you ensuring await for api response?

[le-blip]

@IamDhana its a bit hard to say. Inside loadMoreOlderMessages, are you ensuring await for api response?

Hi @vishalnarkhede why is this necessary? Can you please elaborate the docs, I am willing to help you if you need me.