White space in android

[hardikamber]

Current behavior

Having a lot of white spaces when using it in android
https://github.com/user-attachments/assets/d9dce512-2ef5-4a7b-a5d5-1a172834a585

Expected behavior

this is my implementation from flatlist here not having any whitespace
https://github.com/user-attachments/assets/0a0b113b-65af-4e5c-83eb-8918b316a322

To Reproduce

        <FlashList
          bounces={false}
          ref={scroll}
          contentContainerStyle={{
            ...styles.listContainer
          }}
          data={DATA}
          renderItem={renderItem}
          ListFooterComponent={<InventoryListFooter />}
          ListFooterComponent={() => {
            return <Text style={{ backgroundColor: 'green', paddingVertical: 50 }}>Loading...</Text>;
          }}
          // // onEndReachedThreshold={0.5}
          onEndReached={handleEndReached}
        />

Platform:

Screen_Recording_20250424_185734_amber.mp4

• iOS
• Android

Environment

x.y.z

[hardikamber]

Current behavior

Having a lot of white spaces when using it in android https://github.com/user-attachments/assets/d9dce512-2ef5-4a7b-a5d5-1a172834a585

Expected behavior

this is my implementation from flatlist here not having any whitespace https://github.com/user-attachments/assets/0a0b113b-65af-4e5c-83eb-8918b316a322

To Reproduce

        <FlashList
          bounces={false}
          ref={scroll}
          contentContainerStyle={{
            ...styles.listContainer
          }}
          data={DATA}
          renderItem={renderItem}
          ListFooterComponent={<InventoryListFooter />}
          ListFooterComponent={() => {
            return <Text style={{ backgroundColor: 'green', paddingVertical: 50 }}>Loading...</Text>;
          }}
          // // onEndReachedThreshold={0.5}
          onEndReached={handleEndReached}
        />

Platform:

Screen_Recording_20250424_185734_amber.mp4

• iOS[x] Android

Environment

x.y.z

Using react native 0.78.1
and "@shopify/flash-list": "2.0.0-alpha.8",

[hardikamber]

@naqvitalha in latest alpha release this is not fixed can we please check this

[naqvitalha]

Can you look for explicit keys on items within your renderItem or components? Removing them might help.

[hardikamber]

Can you look for explicit keys on items within your renderItem or components? Removing them might help.

@naqvitalha I have removed all keys in my renderItem components, still it has white space like this
my renderItem looks like this
`import React from 'react';
import get from 'lodash.get';
import isEmpty from 'lodash.isempty';
import { ScrollView, View } from 'react-native';
import { EyeSolidIcon, RightCircleIcon } from '@assets';
import {
getLocation,
getAvailableStartingPricing,
getCapitalizedName,
getCommonAmenities,
getPricingDuration,
getSortedTags,
getTagsFromFeatures,
useConstants,
scaledWidth
} from '@utils';
import { COLORS } from '@theme';
import { Inventory } from '@types';
import { AppText, MetaFacts, DistanceAndLocationSlider, Pressable } from '@components';
import styles from './styles';

type InventoryDetailsPropsType = {
item: Inventory;
onPress: () => void;
showFullLocation?: boolean;
isUniversity?: boolean;
universityName: string;
distanceFrom: { finalDis: string };
};

const InventoryDetails = (props: InventoryDetailsPropsType) => {
const Constants = useConstants();
const { item, onPress, showFullLocation = false, isUniversity = false, universityName, distanceFrom } = props;

const featureTags = get(item, 'feature_tags', []);
const features = get(item, 'features', []);
const offersCount = get(item, 'offers_count', 0);
const roomsCount = get(item, 'active_children_count', 0);
const tags = get(item, 'tags', []);
const unsortedTags = getTagsFromFeatures(featureTags) || [];
const tagsArray = getSortedTags(unsortedTags) || [];
const updatedTags = tagsArray?.concat(getCommonAmenities(getSortedTags(tags), features));
if (roomsCount > 0) {
updatedTags?.unshift(${roomsCount} Rooms Option);
}
if (offersCount > 0) {
updatedTags?.unshift(${offersCount} Offers);
}
const metaFacts = get(item, 'meta_general_facts', []);
const metaDistances = [...get(item, 'top_meta_distances', [])];

if (isUniversity) {
metaDistances?.splice(1, 0, { distance: distanceFrom?.finalDis, place: universityName });
}

const name = item?.name;
const fetchedLocation = getLocation(item?.location, [
'route_short_name',
'locality_long_name',
showFullLocation ? 'country_long_name' : ''
]);
const location = fetchedLocation ? fetchedLocation : '';

const price = getAvailableStartingPricing(item?.pricing);
const pricingDuration = getPricingDuration(item?.pricing?.duration);

return (
<Pressable onPress={onPress} style={styles?.inventoryDetailContainer} testID={'inventoryCardDetailPressable'}>



{name}


{location}



{Constants.FROM}
{price}
{${Constants.PER} ${pricingDuration}}

  <View style={styles.metaDistance}>
    {!isEmpty(metaDistances) && (
      <DistanceAndLocationSlider metaDistances={metaDistances} inventoryId={item?.id} onPressChip={onPress} />
    )}

    {!isEmpty(updatedTags) && (
      <ScrollView
        pointerEvents="auto"
        horizontal={true}
        contentContainerStyle={styles.ammenityContent}
        showsHorizontalScrollIndicator={false}
        bounces={false}
        overScrollMode="never"
        // key={item?.id?.toString()}
      >
        {updatedTags?.slice(0, 10)?.map((name: string, index) => {
          return (
            <Pressable
              onPress={onPress}
              //  key={`${item?.id}${item?.name}${index}`}
              style={styles.distanceContainer}>
              <RightCircleIcon height={scaledWidth(16)} width={scaledWidth(16)} />
              <AppText style={styles.displayName} numberOfLines={1}>
                {getCapitalizedName(name)}
              </AppText>
            </Pressable>
          );
        })}
      </ScrollView>
    )}
  </View>

  {/* {!isEmpty(metaFacts) && (
    <MetaFacts
      factsData={metaFacts}
      onPressFacts={onPress}
      inventoryId={item?.id}
      // key={item?.id?.toString()}
      LeftIcon={<EyeSolidIcon width={14} height={14} color={COLORS.info[500]} />}
      chipStyle={styles.factContainer}
      metaFactsContentContainerStyle={styles.metaFactsContentContainerStyle}
    />
  )} */}
</Pressable>

);
};

export default InventoryDetails;
`

[naqvitalha]

I'm not getting blank area on any of our samples on very low end devices. I'd appreciate if you can provide a sample on snack or github for me to dig deeper.

[Prajwaltechversant]

hi @naqvitalha i have the same white space issue in both android and ios .

[naqvitalha]

@Prajwaltechversant Can you share a video in release mode?