Flash-List does not work right when using RN 0.72.3 Fabric/RN New Architecture #886
Closed as not planned
Description
I converted back to FlatList since it does not have issues in RN New Arch 0.72.3.
The styling of the renderItem has issues (items on top of one another) in the list. Using non-New Architecture works fine.
import { FlashList } from '@shopify/flash-list';
const renderitem = useCallback(
// eslint-disable-next-line no-shadow
({ item, index: ind }: { item: Property[]; index: number }) => {
return <ResultRenderItem isMoreLoading={isMoreLoading} index={ind + 1} item={item} styles={styles} />;
},
[isMoreLoading, styles]
);
const keyExtractor = useCallback((item: { destinationId: number }[]) => `${item[0].destinationId}`, []);
const onEndReached = useCallback(() => {
if (!isMoreLoading && page !== 100) {
setIsMoreLoading(true);
}
}, [isMoreLoading, page, setIsMoreLoading]);
return (
<View style={styles.availabilityContainer}>
{!isLoading && (
<FlatList
ListHeaderComponent={
<HeroScreen
isLoading={isLoading}
availableFacets={availableFacets}
days={availability[0]}
toggleModal={toggleModal}
totalAvailableResidences={totalAvailableResidences}
/>
}
data={loadedDestinations}
keyExtractor={keyExtractor}
onEndReached={onEndReached}
decelerationRate="normal"
onEndReachedThreshold={0.5}
renderItem={renderitem}
onRefresh={onRefresh}
refreshing={isRefresh}
// estimatedItemSize={20}
/>
)}
{isModalOpen && (
<Filters
totalHits={totalAvailableResidences}
availableFacets={availableFacets}
originalSearchFilter={searchFilters}
loadResults={loadResults}
toggleModal={toggleModal}
isModalOpen={isModalOpen}
/>
)}
</View>
);
};
Example Render:
return (
<View style={styles.cardContainer}>
<View style={styles.card}>
<View style={styles.columnContainer}>
<View style={locationTitleStyle}>
<Pressable onPress={goToDestination}>
<ClubText style={styles.titleTextLocation} onTextLayout={handleTextLayout}>
{locationTitle}
<IonIcon name="navigate-circle-outline" style={styles.titleTextLocation as any} />
</ClubText>
</Pressable>
</View>
<ClubText style={styles.titleTextDestinationName}>{item[0].destinationName} </ClubText>
</View>
<ClubText style={styles.availabilityText}>
{item.length} Residence{item.length > 1 ? 's' : ''} available
</ClubText>
<ExploreCarousel units={item} />
{activity && <ActivityIndicator size="large" />}
</View>
</View>
);
Styles:
const componentStyles = ({ width }: { width: number }) =>
StyleSheet.create({
main: {},
image: {
width,
height: 250,
},
indicatorContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width,
height: 20,
position: 'absolute',
bottom: 0,
top: 290,
left: 0,
backgroundColor: addAlpha(Theme.colors.white, 0.4),
},
active: {
height: 10,
width: 10,
borderRadius: 20,
borderWidth: 1,
borderColor: Theme.colors.grey.dark,
backgroundColor: Theme.colors.grey.dark,
margin: 2,
},
inactive: {
height: 10,
width: 10,
borderRadius: 20,
borderWidth: 1,
borderColor: Theme.colors.grey.dark,
margin: 2,
},
availabilityContainer: {
backgroundColor: colors.grey.superLight,
flex: 1,
},
cardContainer: {
marginTop: spacing.base,
marginLeft: spacing.base,
flexDirection: 'column',
backgroundColor: colors.white,
borderTopLeftRadius: 24,
borderBottomLeftRadius: 24,
},
columnContainer: {
paddingRight: spacing.base,
alignItems: 'flex-start',
flexWrap: 'wrap',
},
rowContainer: {
flexDirection: 'row',
alignItems: 'flex-start',
flexWrap: 'wrap',
width: getResidenceCardWidth(width),
},
card: {
padding: spacing.base3,
paddingRight: 0,
},
titleTextLocation: {
marginBottom: spacing.contentMargin,
fontSize: typography.fontSize.large,
fontFamily: typography.fontFamily.book,
color: colors.brand.medium,
},
titleTextDestinationName: {
marginBottom: spacing.base,
fontSize: typography.fontSize.medLarge,
fontFamily: typography.fontFamily.book,
color: colors.black,
},
titleWithIconContainer: {
width: getResidenceCardWidth(width) + spacing.base3,
},
availabilityText: {
paddingRight: spacing.base,
fontSize: typography.fontSize.medium,
fontFamily: typography.fontFamily.thin,
color: colors.primary2,
},
unitImage: {
marginTop: spacing.base / 2,
marginBottom: spacing.base,
marginRight: spacing.base3,
width: getResidenceCardWidth(width),
height: width > 600 ? width * (0.58 / 2) : width * 0.58,
borderRadius: spacing.base / 2,
},
unitNameContainer: {
marginBottom: spacing.base / 2,
width: getResidenceCardWidth(width),
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
unitNameText: {
fontSize: typography.fontSize.medLarge,
fontFamily: typography.fontFamily.book,
color: colors.darkGray.dark3,
width: getResidenceCardWidth(width) * 0.85,
},
occupancyContainer: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'flex-start',
},
occupancyText: {
fontSize: typography.fontSize.small,
fontFamily: typography.fontFamily.thin,
marginLeft: spacing.base / 4,
},
unitDescriptionText: {
fontSize: typography.fontSize.medium,
fontFamily: typography.fontFamily.thin,
color: colors.darkGray.dark3,
marginBottom: spacing.base / 4,
},
mainImage: {
width,
resizeMode: width > 600 ? 'cover' : 'contain',
height: width > 600 ? width * 0.9 : width * 1.075,
},
filterContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginHorizontal: spacing.base,
paddingTop: 24,
paddingBottom: spacing.base,
},
filterIconContainer: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
filterIcon: { width: 28, height: 28, marginRight: 10 },
filterLabel: {
fontFamily: typography.fontFamily.thin,
color: colors.black,
},
titleContainer: {
marginHorizontal: spacing.base,
paddingTop: spacing.base,
paddingBottom: 10,
borderTopWidth: 1,
borderTopColor: colors.grey.light2,
},
title: {
fontFamily: typography.fontFamily.book,
fontSize: typography.fontSize.subtitleLarge,
marginBottom: 5,
},
subTitle: {
fontFamily: typography.fontFamily.book,
fontSize: typography.fontSize.medLarge,
},
inputContainer: {
position: 'absolute',
bottom: spacing.base,
},
input: {
height: 47,
backgroundColor: colors.white,
width: width - spacing.base * 2,
marginHorizontal: spacing.base,
borderRadius: 24,
paddingLeft: spacing.base,
paddingRight: 55,
zIndex: 0,
},
inputWithClearIcon: { paddingRight: 80 },
inputButton: {
...buttonStyles,
right: 20,
},
inputIcon: { fontSize: 24, color: colors.grey.dark },
clearButton: {
...buttonStyles,
right: 54,
},
clearIcon: { fontSize: 20, color: colors.grey.dark4 },
spinner: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 40,
},
resetFilter: {
color: colors.brand.dark,
fontSize: typography.fontSize.mediumMiddleLarge,
textDecorationLine: 'underline',
fontFamily: typography.fontFamily.normal,
marginTop: spacing.contentMargin,
},
});