Flash-List does not work right when using RN 0.72.3 Fabric/RN New Architecture

[billnbell]

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,
    },
  });

[billnbell3]

When are you going to support the new architecture of RN ?

cd ios && bundle install && NO_FLIPPER=1 USE_FRAMEWORKS=static RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --repo-update && cd ..

[naqvitalha]

Hi! 👋

We're now focusing exclusively on FlashList v2 and React Native's New Architecture. This means we're closing older issues and suggestions that aren't relevant to v2.

If this issue/suggestion is still relevant:

• Please verify it still occurs in FlashList v2
• Open a new issue with v2-specific details
• We'll be happy to take a look!

Resources:

• Migration to v2
• FlashList Documentation

Thank you for your understanding! 🙏