Flash-list library not working on React Native 0.71.4 with new architecture and Fabric

[psyrenpark]

Flash-list library not working on React Native 0.71.4 with new architecture and Fabric

Problem

The flash-list library builds successfully for both Android and iOS in a React Native environment with version 0.71.4, new architecture, and Fabric applied, but it doesn't work, and the following error messages occur:

// android
'CellContainer' is not Fabric compatible yet.

// ios
Unimplemented component: <AutoLayoutView>
Unimplemented component: <CellContainer>

Environment

• React Native version: 0.71.4
• Project architecture: new architecture with Fabric applied
• flash-list library version: 1.4.2

package.json

{
    "name": "AppBase",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "xcode": "xed -b ios",
      "start": "react-native start",
      "test": "jest",
      "pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install",
      "ts-check": "yarn tsc --noEmit",
      "lint": "eslint .",
      "lint:js": "yarn eslint src/ && yarn prettier --check src/"
    },
    "dependencies": {
      "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
      "@gorhom/bottom-sheet": "^5.0.0-alpha.0",
      "@react-native-async-storage/async-storage": "^1.17.12",
      "@react-native-community/netinfo": "^9.3.7",
      "@react-native-masked-view/masked-view": "^0.2.8",
      "@react-navigation/bottom-tabs": "^6.5.7",
      "@react-navigation/drawer": "^6.6.2",
      "@react-navigation/elements": "^1.3.17",
      "@react-navigation/material-top-tabs": "^6.6.2",
      "@react-navigation/native": "^6.1.6",
      "@react-navigation/native-stack": "^6.9.12",
      "@react-navigation/stack": "^6.3.16",
      "@rneui/base": "^4.0.0-rc.7",
      "@rneui/themed": "^4.0.0-rc.7",
      "@shopify/flash-list": "^1.4.2",
      "axios": "^1.3.4",
      "dayjs": "^1.11.7",
      "lottie-ios": "3.5.0",
      "lottie-react-native": "6.0.0-rc.2",
      "react": "18.2.0",
      "react-hook-form": "^7.43.7",
      "react-native": "0.71.4",
      "react-native-device-info": "^10.4.0",
      "react-native-exit-app": "^1.1.0",
      "react-native-gesture-handler": "^2.9.0",
      "react-native-image-picker": "^5.3.1",
      "react-native-linear-gradient": "^2.6.2",
      "react-native-pager-view": "^6.1.0-rc.2",
      "react-native-permissions": "^3.8.0",
      "react-native-reanimated": "^3.0.2",
      "react-native-safe-area-context": "^4.5.0",
      "react-native-screens": "^3.20.0",
      "react-native-svg": "^13.8.0",
      "react-native-vector-icons": "^9.2.0",
      "react-native-webview": "^11.26.1",
      "react-query": "^3.39.3",
      "recoil": "^0.7.7",
      "rooks": "^7.8.4"
    },
    "devDependencies": {
      "@babel/core": "^7.20.0",
      "@babel/preset-env": "^7.20.0",
      "@babel/runtime": "^7.20.0",
      "@react-native-community/eslint-config": "^3.2.0",
      "@tsconfig/react-native": "^2.0.2",
      "@types/jest": "^29.2.1",
      "@types/react": "^18.0.24",
      "@types/react-test-renderer": "^18.0.0",
      "babel-jest": "^29.2.1",
      "eslint": "^8.19.0",
      "jest": "^29.2.1",
      "metro-react-native-babel-preset": "0.73.8",
      "patch-package": "^6.4.7",
      "prettier": "^2.4.1",
      "react-test-renderer": "18.2.0",
      "typescript": "4.8.4"
    },
    "jest": {
      "preset": "react-native"
    }
  }

use code

import React from 'react';
import {View, Text, StatusBar} from 'react-native';
import {FlashList} from '@shopify/flash-list';

const DATA = [
  {
    title: 'First Item',
  },
  {
    title: 'Second Item',
  },
  {
    title: 'Third Item',
  },
];

const ZMyListExample = () => {
  return (
    <View
      style={{
        flex: 1,
      }}>
      <FlashList
        data={DATA}
        renderItem={({item}) => <Text>{item.title}</Text>}
        estimatedItemSize={200}
      />
    </View>
  );
};

export default ZMyListExample;

Platform:

• [v] iOS
• [v] Android

Expected Cause

It appears that the CellContainer component is causing an error message on Android due to a lack of Fabric compatibility.
On iOS, the <AutoLayoutView> and <CellContainer> components have not been implemented, resulting in the error messages.

Reproduction Steps

1. Set up a React Native environment with the same conditions as described above.
2. Install and use the flash-list library.
3. Attempt to build the application, and the error messages mentioned above will occur.

Expected Solution

For Android, the CellContainer component's Fabric compatibility needs to be addressed or replaced with a compatible alternative.
For iOS, the <AutoLayoutView> and <CellContainer> components need to be implemented to resolve the problem.

This bug report was written using ChatGPT.

Thank you~

[billnbell]

Are the maintainers going to support New Arch ?

[billnbell]

OK I have a solution - create a react-native.config.js

Put in it:

module.exports = {
  project: {
    ios: {
    unstable_reactLegacyComponentNames: [
      'react-native-fast-image',
      'CellContainer',
      'AutoLayoutView'
    ]},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

[Kaung-Htet-Hein]

OK I have a solution - create a react-native.config.js

Put in it:

module.exports = {
  project: {
    ios: {
    unstable_reactLegacyComponentNames: [
      'react-native-fast-image',
      'CellContainer',
      'AutoLayoutView'
    ]},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

i worked, but can you explain me what it does @billnbell ?

[billnbell]

See reactwg/react-native-new-architecture#135

[RichardLindhout]

OK I have a solution - create a react-native.config.js

Put in it:

module.exports = {
  project: {
    ios: {
    unstable_reactLegacyComponentNames: [
      'react-native-fast-image',
      'CellContainer',
      'AutoLayoutView'
    ]},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

@billnbell unrelated to this issue, but checkout expo-image for alternative which works with same deps but also with new architecture

[billnbell]

Can I use expo-image package with non-expo solution? I didn't think that was possible.

[mertafor]

OK I have a solution - create a react-native.config.js

Put in it:

module.exports = {
  project: {
    ios: {
    unstable_reactLegacyComponentNames: [
      'react-native-fast-image',
      'CellContainer',
      'AutoLayoutView'
    ]},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

Thanks for the workaround.

But I'd really appreciate an official release for fabric support instead of temporary solutions since this solution only allows to ignore incompatible libraries and let them work as is. I love this library and using it almost anywhere in my applications as a Flatlist replacement. I hope the maintainers have plans for releasing a fabric version soon (it's hinted in documentation but there was no specific plan announcements)

[RichardLindhout]

Yeah I'm also worried that legacy components have degraded performance when fabric is enabled

[billnbell]

Well once the react-native-fast-image is converted to use Fabric this can be turned off. Maybe flash-list can put pressure on that author to upgrade to NEW ARCH ?

[CptFabulouso]

The issue is that the FlashList itself is not compatible with Fabric right now, can't see what's the connection to react-native-fast-image? For the FlashList, there is hope in this PR