How to make a component bigger than its parent in expo?-CodePudding

I am trying to make a custom alert like this but it stucks in the flatlist component as you can see in this picture. How can I fix this? I tried taking the codes in the style files of Awesome Alert module but it doesn't work.

My Custom Alert Component

<View style={[styles.container, { display: show ? "flex" : "none" }]}>
  <View style={{ backgroundColor: 'rgba(52,52,52,0.5)', position: "absolute", width: width, height: height }}></View>
  <View style={{ backgroundColor: "#fff", width: 258, borderRadius: 20, position: "absolute", zIndex: 10, alignItems: "center" }}>
    <Text style={{ fontSize: 17, fontWeight: "100", marginTop: 34 }}>{title}</Text>
    <Text style={{ color: "#B3B3B3", marginTop: 13, textAlign: "center", width: 221, paddingBottom: 115 }}>{text}</Text>
    <View style={{ backgroundColor: "#EFEFEF", position: "absolute", width: 258, height: 1, bottom: 95 }}></View>
    <TouchableOpacity style={{ backgroundColor: "#fff", width: 258, height: 47, position: "absolute", bottom: 48, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ color: "#FF4D57" }}>{confirmButton}</Text> </TouchableOpacity>
    <View style={{ backgroundColor: "#EFEFEF", position: "absolute", width: 258, height: 1, bottom: 48 }}></View>
    <TouchableOpacity style={{ backgroundColor: "#fff", width: 258, height: 47, position: "absolute", bottom: 0, borderBottomLeftRadius: 20, borderBottomRightRadius: 20, justifyContent: "center", alignItems: "center" }}>
      <Text>{cancelButton}</Text> </TouchableOpacity>
  </View>
</View>

App.js

<View style={styles.container}>
  {isStarting ?
  <TouchableOpacity style={{ backgroundColor: "#ef783c", width: 80, height: 40, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 50 }}>
    <ActivityIndicator size="small" color="#fff" />
  </TouchableOpacity> :
  <TouchableOpacity onPress={e=> start()} style={{ backgroundColor: "#ef783c", width: 80, height: 40, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 50 }}>
    <Text style={{ color: "#fff" }}>Başlat</Text>
  </TouchableOpacity>
  }
  <FlatList style={{ marginTop: 30, zIndex: 1 }} data={fetched ? feedbacks : [ "."]} enableEmptySections={true} renderItem={({item, index})=> ( fetched ?
    <Feedbacks key={index} feedback={item} index={index}></Feedbacks> :
    <ActivityIndicator size={ "large"} color={ "#000"} style={{ marginTop: 200 }} /> )} ListEmptyComponent={
    <Text style={{ marginTop: 50 }}>Gösterilecek geribildirim bulunamadı</Text>} refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> } />
</View>

Feedbacks.js

<View style={{ display: display }}>
  <View style={{ width: 340, height: 90, alignItems: "center", backgroundColor: "#D9D9D9", borderTopLeftRadius: 17, borderTopRightRadius: 17, flexDirection: "row" }}>
    <TouchableOpacity onPress={e=> ToastAndroid.show(user.username, ToastAndroid.SHORT)}>
      <Image style={{ marginLeft: 10, width: 50, height: 50, borderRadius: 25 }} source={{ uri: `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.webp` }}></Image>
    </TouchableOpacity>
    <Text style={{ marginLeft: 10, maxWidth: 270 }}>{fb}</Text>
  </View>
  <View style={{ width: 340, height: 40, marginBottom: 10, backgroundColor: "#D9D9D9", borderBottomRightRadius: 17, borderBottomLeftRadius: 17, flexDirection: "row" }}>
    <TouchableOpacity onPress={e=> { setShow(true) }} style={{ width: 170, height: 40, justifyContent: "center", alignItems: "center", borderRightColor: "#a9b0b8", borderRightWidth: 0.2, borderTopWidth: 0.4, borderTopColor: "#a9b0b8" }}>
      <Ionicons name="checkmark" size={28} color="green" />
    </TouchableOpacity>
    <TouchableOpacity onPress={e=> { setShow(true) }} style={{ width: 170, height: 40, justifyContent: "center", alignItems: "center", borderLeftColor: "#a9b0b8", borderLeftWidth: 0.1, borderTopWidth: 0.4, borderTopColor: "#a9b0b8" }}>
      <Ionicons name="close-outline" size={28} color="red" />
    </TouchableOpacity>
  </View>
</View>

CodePudding user response：

Wrap a view with Modal. Something like this:

const [modalVisible, setModalVisible] = useState(false);

<Modal
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisible(!modalVisible);
  }}>
  <View style={styles.modal}>
...
  </View>
</Modal>

See Modal for details.