Absolute positioned Icon inside ScrollView moves along with other contents - react-native

Question

I want to fix an icon inside <ScrollView at right bottom as shown below
But currently , the + icon is moving along with other contents. I want it to be fixed at that position even when other contents go down in the background. Current behaviour
Tried solution :
I used contentContainerStyle={{flexGrow :1}} in the ScrollView , still it doesnt work .
It works when I add the icon outside ScrollView. But it doesn't give expected results which is shown below it cuts the scrolliew content right above the icon:
Can anyone suggest with good solution for this scenario?
Code :
<ScrollView>
{this.state.alertData &&
this.state.alertData.map((item, index) => {
return (
<View>
<TouchableOpacity
style={styles.alertContainer}
onPress={() => this.onCardClick(index, true)}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.title}>{item.title}</Text>
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.sideText}>Il y a 2h</Text>
{item.status && (
<Away style={{ marginLeft: 5, marginTop: 6 }} />
)}
</View>
</View>
<View style={{ marginBottom: 10 }}>
<Text style={styles.primaryText}>{item.primaryText}</Text>
<Text style={styles.secondaryText}>
{item.secondaryText}
</Text>
</View>
<View>
<Text style={styles.primaryText}>Message</Text>
<Text style={styles.secondaryText}>{item.message}</Text>
</View>
{this.state.selectedCard[index] && (
<Image
style={{ height: 250, width: 300 }}
// source={require("../../../assets/images/image6.jpeg")}
source={item.image}
/>
)}
</TouchableOpacity>
<Close
style={{ top: 10, right: -5, position: "absolute" }}
onPress={() => this.toggleModal(index)}
/>
</View>
);
})}
<View
style={{ alignItems: "flex-end", marginTop: 20, marginBottom: 20 }}
>
<AddnewAlerts />
</View>
</ScrollView>