FlatList Invariant Violation, Changing numColumns on the fly not supported - Recommended key Fix Does Not Work #50439
Comments
|
Tip Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases. |
react-native-bot
added
Component: FlatList
Needs: Author Feedback
Needs: Repro
|
Tip Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases. |
|
Warning Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:
|
|
Hey @ibrust , It would be great if you could share a reproducer for this issue. You can use the following template to help with that: Reproducer Template. Additionally, could you confirm if this issue is reproducible on Android, iOS, or both? While reviewing the output of npx @react-native-community/cli info, we couldn’t determine if the new architecture is enabled, as the newArchEnabled field is not found. Any insights on this would be appreciated. |
|
@sarthak-d11 new arch is enabled. I do not have time to reproduce and test this for you, I have my own work to do. My recommendation would be you test it in a baseline project with similar settings as output from @react-native-community/cli info, as close as you can approximate the settings, and if you see no issue then close the ticket. |
github-actions
bot
added
Needs: Attention
Description
I'm using react-native 0.76.7. I'm using a FlatList and supporting orientation changes. I'm recalculating the number of columns for the list and changing it on the fly.
I have some local state numCols for this purpose. I'm passing numCols as the key to the flatlist, as recommended by the error message and online.
The error does not go away.
The flatlist is fairly large which appears to cause a delay in rerendering, possibly effecting the timing of the flatlist redrawing. But that's the only noteworthy thing here, it's just a typical FlatList otherwise.
Steps to reproduce
Reproducible example code:
`
function useSimpleOrientation() {
const { width: viewportWidth, height: viewportHeight } = useViewportDimensions();
const [orientation, setOrientation] = useState(
viewportWidth > viewportHeight ? SimpleOrientation.LANDSCAPE : SimpleOrientation.PORTRAIT
);
useEffect(() => {
const sub = Dimensions.addEventListener('change', ({ window: { width, height } }) => {
if (width < height) {
setOrientation(SimpleOrientation.PORTRAIT);
} else {
setOrientation(SimpleOrientation.LANDSCAPE);
}
});
return () => {
sub.remove();
};
}, []);
return orientation;
}
export default function MyListComponent({ pageNumber }: MyListComponentProps) {
const flatListRef = React.useRef(null);
const pageSize = 60;
const [numCols, setNumCols] = useState(getProductCardNumCols(viewportWidth, sizeCategory));
const orientation = useSimpleOrientation();
React.useEffect(() => {
const newColumnCount = getNewColumnCount(sizeCategory);
if (newColumnCount !== numCols) {
setNumCols(newColumnCount);
}
}, [orientation, setNumCols, viewportWidth, sizeCategory, numCols]);
const renderEmptyComponent = useCallback(() => {
return (
No items found
);
}, []);
useEffect(() => {
flatListRef.current?.scrollToOffset({ offset: 0, animated: false });
}, [pageNumber]);
const getItemLayout = useCallback(
(data: ArrayLike | null | undefined, index: number) => ({
length: STATIC_ITEM_HEIGHT,
offset: STATIC_ITEM_HEIGHT * index,
index,
}),
[]
);
const renderItem = useCallback(({ item }: { item: ViewableItem }) => {
return ;
}, []);
const keyExtractor = useCallback((item: ViewableItem, index: number): string => {
return item.getStringId() + index.toString();
}, []);
return (
<View style={[styles.container, style, styles.flatList]}>
<FlatList
key={orientation + numCols}
ref={flatListRef}
style={styles.flatList}
data={inventory}
columnWrapperStyle={numCols > 1 ? { justifyContent: 'space-evenly' } : undefined}
ListEmptyComponent={renderEmptyComponent}
getItemLayout={getItemLayout}
numColumns={numCols}
keyExtractor={keyExtractor}
renderItem={renderProductCardInList}
initialNumToRender={pageSize}
ItemSeparatorComponent={FlatlistSeparator}
/>
);
}
`
expected result: since the key is set to orientation + numCols, as the error message recommends, there should be no runtime error.
result: runtime error
React Native Version
0.76.7
Affected Platforms
Runtime - Android
Output of
npx @react-native-community/cli infoStacktrace or Logs
Reproducer
It's not my job to maintain this repo, it's yours.
Screenshots and Videos
No response
The text was updated successfully, but these errors were encountered: