fermeture auto

components/setStatus.tsx

@@ -1,6 +1,6 @@
 import { useChantier } from '@/app/ContextChantier';
 import { useState } from 'react';
-import { Dimensions, LayoutAnimation, Pressable, StyleSheet, View } from 'react-native';
+import { Dimensions, LayoutAnimation, Modal, Pressable, StyleSheet, View } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 import { ThemedButton } from './themed-button';
 import { ThemedText } from './themed-text';
@@ -50,43 +50,53 @@ export default function SetStatus() {
 
 
     return(
-      <Animated.View 
-      layout={LinearTransition.duration(200)}
-      style={isOpen ? styles.windowOpean : styles.windowClose}>
-
-        <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-          <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-            <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
-          </ThemedButton>
-          {isOpen &&
-            <View style={styles.menu}>
-                <View style={styles.list}>
-                        
-                    {choices.map((str, index) => (
-                            str!==currentSatus && choice(str, index)
-                    ))}
-                </View>
-            </View>
-          }
-        </AnimatedThemedView>
-      </Animated.View>
+      <>
+        <Modal
+          visible={isOpen}
+          transparent
+          animationType="none"
+          onRequestClose={() => setIsOpen(false)}
+        >
+          {isOpen && (
+            <Pressable
+              style={styles.overlay}
+              onPress={() => setIsOpen(false)}
+            />
+          )}
+        </Modal>
+        <Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
+          <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
+            <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+              <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
+            </ThemedButton>
+            {isOpen &&
+              <View style={styles.menu}>
+                  <View style={styles.list}>
+                          
+                      {choices.map((str, index) => (
+                              str!==currentSatus && choice(str, index)
+                      ))}
+                  </View>
+              </View>
+            }
+          </AnimatedThemedView>
+        </Animated.View>
+      </>
     )
     
 }
 
 const styles = StyleSheet.create({
-
-  windowClose:{
-    //backgroundColor: '#00FFFF',
-    //borderRadius:10,
-    padding: 10,
-    width:"50%",
-    //height:60,
-    overflow: 'hidden',    
+    overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
   },
-  windowOpean:{
-    width:"50%",
+  windowBox:{
+    //backgroundColor: '#00FFFF40',
+    width:"30%",
     padding: 10,
+    paddingLeft: 0,
+    overflow: 'hidden',
   },
   window:{
     borderRadius:15,
@@ -106,7 +116,7 @@ const styles = StyleSheet.create({
   },
   satus:{
     padding:10,
-    flexDirection: 'row',
+    margin:5,
   },
   button:{
     width:'100%',
@@ -117,5 +127,6 @@ const styles = StyleSheet.create({
   },
   centeredText:{
     textAlign: 'center',
+    fontSize: 13,
   }
 });