React Native slow loading BannerAd inside FlashList

Question

I am using the @shopify\flash-list (v1.6.3) package to render different posts and every x item should be a BannerAd (react-native-google-mobile-ads v13.2.0).

If the user scrolls over the ad it takes very long to load well it's about 3-4 seconds but for a feed it is too slow. Is there a way to preload those BannerAds? Also if the user scrolls up to a previous BannerAd he will get a new Ad if the component rerenders.

import {FlashList} from "@shopify/flash-list";
import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';


<FlashList data={postList}
       renderItem={(item: any) => {
         if (item.item.ad) {
           return <View className="my-2 h-[300px] rounded-xl flex justify-center items-center">
             <BannerAd key={item.item.id}
                       unitId={TestIds.BANNER}
                       size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
             />
           </View>
         }
         return <Post item={item.item}/>;
       }}
       keyExtractor={(item: any) => item.id}
       numColumns={1}
       estimatedItemSize={300}
       refreshing={isFetching}
       refreshControl={refreshControl}
       onEndReached={loadMore}
       onEndReachedThreshold={0.3}
/>

Answer 1

I think you need to reduce the estimatedItemSize, try to set estimatedItemSize to 180 or something

or

you can give specific height and width

estimatedListSize={{
        height: Dimensions.get('screen').height,  // adjust according to need
        width: Dimensions.get('screen').width,
      }}