Flash-list library not working on React Native 0.71.4 with new architecture and Fabric #811
Description
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-listlibrary 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
- Set up a React Native environment with the same conditions as described above.
- Install and use the
flash-listlibrary. - 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~