React Native: response-native-popup-dialog не работает

Question

Я использую плоский список для отображения данных при длительном нажатии на данные плоского списка. Я хочу, чтобы во всплывающем диалоговом окне для ввода замечаний

это функция длительного нажатия

saveGroup (){
      console.log("Long Press");
      this.setState({
        visibleGroup: "true",
      });
    }    

это строка рендеринга, когда я долго нажимал на данные, чтобы отобразить всплывающее диалоговое окно для ввода замечаний

renderRow = (item) => {
        if(item.type=="D"){
            this.state.typetext="Dent"
        }
        if(item.type=="S"){
            this.state.typetext="Scratch"
        }
        if(item.type=="C"){
            this.state.typetext="Crack"
        }
        return (
            <ScrollView>
                 <View style={customStyles.listViewContainer} > 
                 <View style={{ flex: 1 }}>
                 <TouchableOpacity
                 underlayColor='#dddddd' onLongPress={() => this.saveGroup()}
                 >
                 <View style={{ flexDirection: "column", alignItems: "flex-start" }}>
                   {
                     this.state.typetext == "Dent" ?
                     <View style={{ flexDirection: "row" }} >
                        <Text style={{ marginLeft: 5, marginTop: 5, marginBottom: 3, fontWeight: "bold", color: "black" }}>{item.id}</Text>
                         <Text style={{ marginLeft: 5,marginTop: 5, marginBottom: 3}}>{this.state.typetext}</Text>
                         <Image
                            source={require("./../../resource/circle.png")}
                            style={{ resizeMode: "cover", width: 10, height: 10,marginLeft: 5,marginTop: 5 }}
                                />
                    </View> : <View/> }
                   {
                    this.state.typetext == "Scratch" ?
                    <View style={{ flexDirection: "row" }} >
                    <Text style={{ marginLeft: 5, marginTop: 5, marginBottom: 3, fontWeight: "bold", color: "black" }}>{item.id}</Text>
                          <Text style={{ marginLeft: 5, marginTop: 5, marginBottom: 3}}>{this.state.typetext}</Text>
                        <Image
                            source={require("./../../resource/star.png")}
                            style={{ resizeMode: "cover", width: 10, height: 10,marginLeft: 5,marginTop: 5 }}
                                />
                      </View> : <View/> }
                             {
                              this.state.typetext == "Crack" ?
                   <View style={{ flexDirection: "row" }}>
                   <Text style={{ marginLeft: 5, marginTop: 5, marginBottom: 3, fontWeight: "bold", color: "black" }}>{item.id}</Text>
                    <Text style={{ marginLeft: 10, marginTop: 5, marginBottom: 3}}>{this.state.typetext}</Text>
                    <Image
                       source={require("./../../resource/exclamation.png")}
                       style={{ resizeMode: "cover", width: 10, height: 10,marginLeft: 5,marginTop: 5 }}
                            />
                    </View> : <View/> }

                   </View>
                    <View style={{flexDirection:"row"}}><TouchableOpacity>
                <Text style={{ color: "white", backgroundColor: "#FE7C2D",  
      padding: 5, marginTop: 10, marginBottom:10 , fontSize: 12,marginLeft:10}}> Remove</Text></TouchableOpacity>

      <View style={{flexDirection:"column",marginRight:"auto"}} ><TouchableOpacity>
      <Text style={{ color: "white", backgroundColor: "#746766", 
      padding: 5, marginTop: 10, fontSize: 12,marginLeft:10, }}> pending</Text></TouchableOpacity>
      </View>
        </View>
        </TouchableOpacity>

         </View>
         <Dialog width="95%"
        visible={this.state.visibleGroup}
        onTouchOutside={() => {
          this.setState({ visibleGroup: false });
        }}

        dialogTitle={
          < DialogTitle title={"Enter Service remarks"} />
        }

        footer={
          <DialogFooter><DialogButton text="Cancel" style="{{color: '#ffaf49'}}" onPress={() => {}} />
            <DialogButton text="Save" style="{{color: '#ffaf49'}}" onPress={() => {}} /></DialogFooter>
        }
      >
        <DialogContent>

          <Container>
            <TextInput
              style={customStyles.inputsRemarksGroup}
              multiline={true}
              numberOfLines={4} 
              placeholder="Enter Remarks"
              underlineColorAndroid="transparent"
            //   value={this.state.remarksGroup}
            //   onChangeText={this.handleRemarksGroup}
            />
          </Container>
         </DialogContent>
      </Dialog>

        </View> 

        </ScrollView>

                 );

* И плоский список *

 render() {
            let { data, checked } = this.state;
            if (!this.state.ready) {
                    return (
                            <ActivityIndicator
                                    animating={true}
                                    style={customStyles.indicator}
                                    color="#ffc77d"
                                    size="large"
                            />
                    );
            }
            if (this.state.ready) {
                    return (


                            <FlatList
                                    data={data}
                                    extraData={this.state}
                                    renderItem={({ item, index }) => (
                                            this.renderRow(item, index)
                                    )}
                                    ListHeaderComponent={this.Render_FlatList_Sticky_header}
                                    stickyHeaderIndices={[0]}

                            />

                    );
            }
    }

когда я долго нажимаю данные плоского списка, диалоговое окно не работает