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

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 (

<FlatList
data={[0, 1, 2, 3, 4, 5]}
renderItem={({ item, index }) => (

<TouchableOpacity
style={styles.button}
onPress={() => {
setShowOptions(true);
setActiveCard(index);
}}
>
Click me

{showOptions && activeCard === index && (

)}

)}
ItemSeparatorComponent={() => }
contentContainerStyle={styles.listContent}
/>

);
}

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

Commencez par le reproducer Snack lié et le composant App fourni, en vous concentrant sur FlatList, les styles de card et optionsContainer, ainsi que sur l’état qui contrôle la carte active. Comparez le comportement sur les plateformes indiquées Android, iOS et Web ; le travail est terminé lorsqu’un problème React Native reproductible a été identifié et que sa portée a été confirmée, ou lorsqu’il a été documenté qu’il est causé par le code d’exemple.