afficher la boite de dialogue lors du click sur un produit

Bonsoir,

Je suis dans un projet d'une application mobile en React Native. Je développe actuellement un écran contenant une liste de course.

Mon but est d'ouvrir une boite de dialogue permettant de demander à l'utilisateur la quantité acheté du produit.

J'ai un fichier dans lequel il y a le code pour la boite de dialogue que j'importe dans le fichier liste_course.js pour l'affichage de la liste de course.

Voici le code :

essai.js

import { StyleSheet, View } from "react-native";
import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';

export function dialogue() {

    let state = {
        visible: false
    }

    return (
    <View style={styles.container}>
        <Dialog
            visible={state.visible}
            footer={
            <DialogFooter>
                <DialogButton
                    text="OK"
                    onPress={() => {}}
                />
            </DialogFooter>
            }
        >
        </Dialog>
    </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

liste_course.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View, StyleSheet , Button, Alert, SafeAreaView } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { dialogue }  from './essai'

const tab_Course = [ 
    { id: "1", nom_produit: "Barre de Chocolat" }, 
    { id: "2", nom_produit: "Paquet de Lait" }, 
    { id: "3", nom_produit: "Shamppoing anti-pelliculaire" },
    { id: "4", nom_produit: "Sèche-Cheveux" },
    { id: "5", nom_produit: "Coca-cola" },
    { id: "6", nom_produit: "Jus de pomme" },
    { id: "7", nom_produit: "Biscuits" },
    { id: "8", nom_produit: "Produit Linge" },
    { id: "9", nom_produit: "Orange" }
]

class Liste_Course extends React.Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Text>La liste de course</Text> 
                <FlatList data={tab_Course}
                keyExtractor={(item) => item.id} 
                renderItem={({item}) => <Text style={{ fontSize : 30 }}>{item.nom_produit}<Button style={styles.button} title="🛒" onPress={dialogue()}/></Text>}/>
                <StatusBar style="auto" />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        paddingTop: 77, 
        alignItems: "center",
    },
    button : {
        flex: 1,
        color: "white",
        justifyContent: "space-between"
    }
})

export default Liste_Course

Mais rien s'affiche je ne sais pas pourquoi. Je suis qu'un débutant en React Native. Une aide est le bienvenue et utile pour mon apprentissage.

Je vous remercie :).