selection chantier (animation,correction) ; ajustement et amélioration du thème ; chantier provider

components/example.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
+
+
+export default function Example() {
+  useEffect(() => {
+    // Activer sur Android
+    if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  function onPressOpen() {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsOpen(prev => !prev);
+  }
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={onPressOpen} style={styles.button}>
+        <Text>Toggle</Text>
+      </TouchableOpacity>
+
+      <Animated.View layout={Layout.springify()} style={[styles.box, isOpen ? styles.boxOpen : styles.boxClosed]}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'tomato',
+          }}
+        >
+          <View
+          style={{
+            width: '10%',
+            height: '10%',
+            backgroundColor: '#FFFFFF',
+          }}
+        >
+          
+        </View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 20 },
+  button: { marginBottom: 12, padding: 10, backgroundColor: '#eee' },
+  box: {
+    // important pour masquer l'excédent pendant l'animation
+    overflow: 'hidden',
+  },
+  boxClosed: {
+    height: 10,
+    width:10,
+    //backgroundColor: '#00FF00',
+  },
+  boxOpen: {
+    // mettre une valeur numérique (pas 'auto')
+    height: 120,
+    width:120,
+    //backgroundColor: '#00FF00',
+  },
+});