Description
System Info
React Native: 0.79.2
React: 19.0.0
React Native CLI: 18.0.0
React Native Gradle Plugin: 0.79.2
Node: 20.11.1
Project Node version (.nvmrc): 16.15.1
npm: 10.2.4
Yarn: 3.5.0
OS: Linux x86_64, kernel 6.8.0-136-generic
Android compile SDK: 35
Android target SDK: 35
Android min SDK: 26
Kotlin: 2.0.21
Expected behavior
For a horizontal FlatList nested inside a vertically scrolling FlatList, the inner list’s onViewableItemsChanged should not report an item as viewable until
the parent row is visible in the device viewport.
An item should satisfy both conditions:
Visible within the inner horizontal FlatList
AND
The parent row containing that FlatList is visible on screen
Actual behavior
onViewableItemsChanged for a nested horizontal FlatList fires when its parent row mounts, even if the parent row is below the device viewport.
The inner FlatList appears to calculate viewability relative to its own local scroll viewport only. It does not account for the outer vertical FlatList’s
clipping or whether the parent row is actually visible on the screen.
This produces false impression events for analytics: items are marked viewable before the user can see them.
Details
Our application has a vertical FlatList of sections. Several sections contain horizontal FlatLists.
On the initial screen:
Sections 1–4: visible in the device viewport
Sections 5–8: mounted by the outer FlatList but below the device viewport
The nested horizontal FlatLists in Sections 5–8 invoke onViewableItemsChanged immediately, reporting their initial items as viewable before the user scrolls
the outer list.
For analytics, this is incorrect: “viewable” should represent visibility to the user, not only visibility within an off-screen nested list container.
`import React, { useRef } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const SECTION_HEIGHT = 220;
const ITEM_WIDTH = 140;
const sections = Array.from({ length: 8 }, (_, index) => ({
id: section-${index + 1},
title: Section ${index + 1},
}));
const items = Array.from({ length: 8 }, (_, index) => ({
id: item-${index + 1},
title: Item ${index + 1},
}));
function NestedHorizontalList({ sectionId }) {
// These objects must retain their identity for the lifetime of a FlatList.
const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 50,
minimumViewTime: 0,
waitForInteraction: false,
}).current;
const onViewableItemsChanged = useRef(({ viewableItems }) => {
console.log(
[${sectionId}] reported viewable before outer list is scrolled:,
viewableItems.map(({ item }) => item.id).join(', ')
);
}).current;
return (
<FlatList
horizontal
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
{item.title}
)}
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={onViewableItemsChanged}
showsHorizontalScrollIndicator={false}
/>
);
}
export default function App() {
return (
<FlatList
data={sections}
getItemLayout={(_, index) => ({
length: SECTION_HEIGHT,
offset: SECTION_HEIGHT * index,
index,
})}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
{item.title}
)}
/>
);
}
const styles = StyleSheet.create({
section: {
height: SECTION_HEIGHT,
paddingTop: 16,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#9ca3af',
},
sectionTitle: {
marginHorizontal: 16,
marginBottom: 12,
fontSize: 18,
fontWeight: '600',
},
item: {
width: ITEM_WIDTH,
height: 120,
marginLeft: 12,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
backgroundColor: '#dbeafe',
},
});
`
Steps to reproduce
Reproduction steps
- Render a vertical FlatList with multiple fixed-height rows.
- Place a horizontal FlatList inside every row.
- Add onViewableItemsChanged and viewabilityConfig to each inner horizontal FlatList.
- Launch the screen without scrolling.
- Observe that inner lists belonging to below-the-fold parent rows report items as viewable.
React Native Version
0.79.2
Affected Platforms
Runtime - Android, Runtime - iOS
Output of npx @react-native-community/cli info
System:
OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1270P
Memory: 13.94 GB / 30.59 GB
Shell:
version: 5.1.16
path: /bin/bash
Binaries:
Node:
version: 20.11.1
path: /home/arpitagari/.nvm/versions/node/v20.11.1/bin/node
Yarn:
version: 3.5.0
path: /home/arpitagari/.nvm/versions/node/v20.11.1/bin/yarn
npm:
version: 10.2.4
path: /home/arpitagari/.nvm/versions/node/v20.11.1/bin/npm
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "28"
- "30"
- "31"
- "32"
- "33"
- "34"
- "35"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
- 36.1.0
System Images:
- android-36 | Google Play Intel x86_64 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java:
version: 17.0.19
path: /usr/lib/jvm/java-17-openjdk-amd64/bin/javac
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
Stacktrace or Logs
MANDATORY Reproducer
NA
Screenshots and Videos
No response
Description
System Info
React Native: 0.79.2
React: 19.0.0
React Native CLI: 18.0.0
React Native Gradle Plugin: 0.79.2
Node: 20.11.1
Project Node version (.nvmrc):
16.15.1npm: 10.2.4
Yarn: 3.5.0
OS: Linux x86_64, kernel 6.8.0-136-generic
Android compile SDK: 35
Android target SDK: 35
Android min SDK: 26
Kotlin: 2.0.21
Expected behavior
For a horizontal FlatList nested inside a vertically scrolling FlatList, the inner list’s onViewableItemsChanged should not report an item as viewable until
the parent row is visible in the device viewport.
An item should satisfy both conditions:
Visible within the inner horizontal FlatList
AND
The parent row containing that FlatList is visible on screen
Actual behavior
onViewableItemsChanged for a nested horizontal FlatList fires when its parent row mounts, even if the parent row is below the device viewport.
The inner FlatList appears to calculate viewability relative to its own local scroll viewport only. It does not account for the outer vertical FlatList’s
clipping or whether the parent row is actually visible on the screen.
This produces false impression events for analytics: items are marked viewable before the user can see them.
Details
Our application has a vertical FlatList of sections. Several sections contain horizontal FlatLists.
On the initial screen:
Sections 1–4: visible in the device viewport
Sections 5–8: mounted by the outer FlatList but below the device viewport
The nested horizontal FlatLists in Sections 5–8 invoke onViewableItemsChanged immediately, reporting their initial items as viewable before the user scrolls
the outer list.
For analytics, this is incorrect: “viewable” should represent visibility to the user, not only visibility within an off-screen nested list container.
`import React, { useRef } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const SECTION_HEIGHT = 220;
const ITEM_WIDTH = 140;
const sections = Array.from({ length: 8 }, (_, index) => ({
id:
section-${index + 1},title:
Section ${index + 1},}));
const items = Array.from({ length: 8 }, (_, index) => ({
id:
item-${index + 1},title:
Item ${index + 1},}));
function NestedHorizontalList({ sectionId }) {
// These objects must retain their identity for the lifetime of a FlatList.
const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 50,
minimumViewTime: 0,
waitForInteraction: false,
}).current;
const onViewableItemsChanged = useRef(({ viewableItems }) => {
console.log(
[${sectionId}] reported viewable before outer list is scrolled:,viewableItems.map(({ item }) => item.id).join(', ')
);
}).current;
return (
<FlatList
horizontal
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
{item.title}
)}
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={onViewableItemsChanged}
showsHorizontalScrollIndicator={false}
/>
);
}
export default function App() {
return (
<FlatList
data={sections}
getItemLayout={(_, index) => ({
length: SECTION_HEIGHT,
offset: SECTION_HEIGHT * index,
index,
})}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
{item.title}
)}
/>
);
}
const styles = StyleSheet.create({
section: {
height: SECTION_HEIGHT,
paddingTop: 16,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#9ca3af',
},
sectionTitle: {
marginHorizontal: 16,
marginBottom: 12,
fontSize: 18,
fontWeight: '600',
},
item: {
width: ITEM_WIDTH,
height: 120,
marginLeft: 12,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
backgroundColor: '#dbeafe',
},
});
`
Steps to reproduce
Reproduction steps
React Native Version
0.79.2
Affected Platforms
Runtime - Android, Runtime - iOS
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
NA
Screenshots and Videos
No response