Mise à jour affichage list

Bonjour,
J'ai une page qui va faire un map d'un tableau situé dans le store listStore.
Le problème c'est que map ne s'exécute qu'une seule fois. Comment faire pour qu'a chaque ajout dans la liste ToDoList j'ai à nouveau mon listStore.TodoList.map qui se réexécute ?

Mon Page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React,{useState,useEffect} from 'react';
import { TextInput, TouchableOpacity, View, Text, StyleSheet,Button,ScrollView } from 'react-native';
import {listStore} from '../../store/TaskLisStore'
const DoneScreen = (props) => {
    const{navigation}=props;
return(
    <View style={{flex:1}}>
    <View style={{flex:0.1}}>
      <Text>Tâche faite</Text>
    </View>
 
      <ScrollView  style={{flex:0.8}} contentContainerStyle={{flexGrow:0}}>
        {
         listStore.TodoList.map(element=> {//la partie qui devrait s'exécuter à chaque ajout dans la liste
          return(
          <View key={1} style={{borderWidth:1,marginTop:'5%',marginLeft:"2.5%",marginRight:"2.5%"}}>
            <Text style={{width:'100%',borderWidth:1,fontSize:15,fontWeight: "bold"}}>{element.GetTitle()}</Text>
            <Text style={{width:'100%',borderWidth:1,fontSize:15}}>{element.GetDesc()}</Text>
          </View>
          )})
        }
      </ScrollView>
    {/* </SafeAreaView> */}
    <View style={{flex:0.1,marginTop:'5%',backgroundColor:"#901oao" }}>
        <Button
        title="Ajouter une tâche"
        onPress={()=>{ navigation.navigate("addTask")}}
        />
    </View>
  </View>
)
}
 
export default DoneScreen

Mon store :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import {observable,action, makeObservable} from 'mobx'
class ListStore {
    TodoList=[];
    DoneList=[];
    InProgressList=[];
    //TODO
    addTodo=(Task)=>{
        this.TodoList.push(Task)
    }
    deleteTodo=(index)=>{
        this.TodoList.splice(index, 1)
    }
    //DONE
    addDone=(Task)=>{
        this.DoneList=Task;
    }
    deleteDone=(index)=>{
        this.DoneList.splice(index, 1)
    }
    //InProgress
    addInProgress=(Task)=>{
        this.InProgressList=Task;
    }
 
    deleteInProgres=(index)=>{
        this.InProgressList.splice(index, 1)
    }
 
    constructor(){
        makeObservable(this,{
            TodoList:observable,
            DoneList:observable,
            InProgressList:observable,
            addTodo:action,
            addDone:action,
            addInProgress:action,
            deleteTodo:action,
            deleteDone:action,
            deleteInProgres:action,
        });
    }
}
 
const listStore = new ListStore();
export {listStore};