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 ..