Issue with rendering a list of elements in React Native FlatList or using the array mapping method.

[akashdoddmaniedufund]

Description

Hi,

I’m encountering an issue with the FlatList in React Native (or when using the array mapping method). The rendered items are stacking on top of the previous ones. Below is the code I'm working with. Could you please help me resolve this behavior?

Thank you!

Steps to reproduce

`import { useState } from 'react'; import { Text, SafeAreaView, StyleSheet, FlatList, View, TouchableOpacity, } from 'react-native';

export default function App() { const [showOptions, setShowOptions] = useState(false); const [activeCard, setActiveCard] = useState(null);

return ( <SafeAreaView style={styles.container}> <FlatList data={[0, 1, 2, 3, 4, 5]} renderItem={({ item, index }) => ( <View style={styles.card}> <TouchableOpacity style={styles.button} onPress={() => { setShowOptions(true); setActiveCard(index); }} > <Text style={styles.buttonText}>Click me</Text> </TouchableOpacity> {showOptions && activeCard === index && ( <View style={styles.optionsContainer}></View> )} </View> )} ItemSeparatorComponent={() => <View style={styles.separator} />} contentContainerStyle={styles.listContent} /> </SafeAreaView> ); }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, }, card: { height: 100, width: '100%', backgroundColor: 'green', borderRadius: 8, position: 'relative', }, button: { position: 'absolute', bottom: 10, right: 10, }, buttonText: { color: '#fff', fontWeight: 'bold', }, optionsContainer: { backgroundColor: 'yellow', borderRadius: 8, height: 80, width: '50%', position: 'absolute', top: 80, }, separator: { height: 20, }, listContent: { padding: 20, paddingBottom: 100, }, }); `

This is the code

React Native Version

0.73.0

Affected Platforms

Runtime - Android, Runtime - iOS, Runtime - Web

Output of npx react-native info

NA

Stacktrace or Logs

NA

Reproducer

https://snack.expo.dev/nGlFBl-YeXppULXrGhsy9

Screenshots and Videos

https://github.com/user-attachments/assets/141325b0-1851-4067-8328-ce2b5a5f26d8

[react-native-bot]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.10. 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]

:warning:

Newer Version of React Native is Available!

:information_source:

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.

[shubhamguptadream11]

@akashdoddmaniedufund Can you please provide a valid and formatted code for repro. I tried copying it but there are few syntax errors. You can use snack or reproducer template as well.

[shubhamguptadream11]

@akashdoddmaniedufund Got the snack link. It is reproducible.

[shubhamguptadream11]

@akashdoddmaniedufund Try passing zIndex: 1 to optionsContainer style.

[akashdoddmaniedufund]

@akashdoddmaniedufund Try passing zIndex: 1 to optionsContainer style.

Tried that, that's not helping out

here's the link: https://snack.expo.dev/@akashdoddmani/grounded-orange-coffee

[shubhamguptadream11]

@akashdoddmaniedufund I checked this on latest RN version: 0.75.4. It seems to be working there with zIndex. Try checking on latest RN version once.

[akashdoddmaniedufund]

@akashdoddmaniedufund I checked this on latest RN version: 0.75.4. It seems to be working there with zIndex. Try checking on latest RN version once.

Can you share me the snack link?

[shubhamguptadream11]

@akashdoddmaniedufund I tested this here: https://github.com/facebook/react-native/tree/main/packages/rn-tester Currently didn't have snack link.

[akashdoddmaniedufund]

@akashdoddmaniedufund I tested this here: https://github.com/facebook/react-native/tree/main/packages/rn-tester Currently didn't have snack link.

I didn't get you. I actually tried with the latest [email protected].

I don't understand how you have tried, Could you please share me a snack link if possible?

[shubhamguptadream11]

@akashdoddmaniedufund I had updated the code here: https://github.com/dream-sports-labs/reproducer-react-native Please check and let me know if issue still exists.

[akashdoddmaniedufund]

@shubhamguptadream11 I tried your code, the issue still exist, not sure, how it is working for you, attaching the screenshot

[shubhamguptadream11]

@akashdoddmaniedufund Did you checked by cloning and running this repo: https://github.com/dream-sports-labs/reproducer-react-native? I checked this on iOS & Android with New architecture enabled, It's working fine.

[shubhamguptadream11]

@akashdoddmaniedufund I just checked this on Old architecture. This issue is reproducible there. On New arch it's not reproducible.

So this is specific to Old architecture. Can you check this on new arch at your end as well?

[mahishdino]

Might be the architecture issue but need to get more clarification!