69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
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',
|
|
},
|
|
});
|