React Native : Image on absolute position appears truncated on FlatList

Question

I'm trying to render a DoctorCard component inside an horizontal Flatlist. The issue that the image that is on position:absolute inside the DoctorCard that i render inside Flatlist doesn’t appear as you can see in the image below.

The DoctorCard code is this :

export default function DoctorCard({ doctor }) {
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image source={IMGAE} style={styles.image} />
      </View>
      <Text style={styles.doctorName}>Dr. Steave James</Text>
      <Text style={styles.doctorDescr}>Diabetologist, General Physician, Endocrinologist M.B.B.S, MRCP (UK), MRCP (London)</Text>
      <View style={styles.rating}>
          <Rating avg={doctor.avgRating} ratings={doctor.ratingsNumber}/>
      </View>
    </View>
  )
};

const styles = StyleSheet.create({
    container: {
        width: 122,
        height: 120,
        backgroundColor: '#fff',
        borderRadius: 18,
        position:'relative',
        paddingHorizontal: 12,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 17,
    },
    imageContainer: {
      position: 'absolute',
      height: 50,
      top: '-25%',
      width: '100%',
      alignItems: 'center',
    },
    image: {
        borderRadius: 50,
        height: 50,
        width: 50,
    },
})

And I'm trying to render it inside the FlatList :

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <ScrollView style={[styles.container, { paddingVertical: 30 }]}>
      <View style={styles.section}>
        <Text style={styles.sectionName}>Doctors nearby you</Text>
        <Pressable
          onPress={() => {}}
          style={({ pressed }) => [
            {
              opacity: pressed ? 0.6 : 1,
            },
            styles.seeAllBtn,
          ]}
        >
          <Text style={styles.seeAll}>See all</Text>
        </Pressable>
      </View>
      <View style={styles.doctorsContainer}>
          <FlatList 
            data={doctors}
            renderItem={({index, item}) => (
              <DoctorCard doctor={item} />
            )}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            bounces={false}
            pagingEnabled
            keyExtractor={doctor => doctor.id}
            style={styles.flatList}
          />
        </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container : {
    flex: 1,
    backgroundColor: '#F8F8FB',
  },
  section: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginHorizontal: 24,
    marginTop: 2,
  },
  sectionName: {
    fontSize: 18,
    fontFamily: Fonts.family.bold,
    color: '#0A0A0A',
    fontWeight: 500
  },
  seeAll: {
    fontSize: 14,
    fontFamily: Fonts.family.semiBold,
    color: Colors.green,
    fontWeight: 500
  },
  seeAllBtn: {
    paddingHorizontal:18,
    paddingVertical: 6
  },
  doctorsContainer: {
    marginHorizontal: 24,
    marginTop: 51,
  },
})

I have tried to use zIndex or to do something like this but it doesn't work the FlatList doesn’t appear anymore on the screen :

renderItem={({ index, item }) => 
  (
    <View style={{ position: 'absolute', left: index * 130 }}>
      <DoctorCard doctor={item} />
    </View>
)}

How can I fix it ?

Answer 1

I tried to work around the problem with this solution:

1- I added another outcontainer <View> :

export default function DoctorCard({ doctor }) {
  return (
    <View style={styles.outContainer}>
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image source={IMGAE} style={styles.image} />
        </View>
        <Text style={styles.doctorName}>Dr. Steave James</Text>
        <Text style={styles.doctorDescr}>Diabetologist, General Physician, Endocrinologist M.B.B.S, MRCP (UK), MRCP (London)</Text>
        <View style={styles.rating}>
          <Rating avg={doctor.avgRating} ratings={doctor.ratingsNumber}/>
        </View>
      </View>
    </View>
  ); 
};

const styles = StyleSheet.create({
  outContainer: {
    height: 180,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

2- Then in the FlatList, i added style={{ marginTop: -31 }}. And now i have the result i wanted.