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',
  },
});