Commit cb9b701f authored by Thomas's avatar Thomas
Browse files

no message

parent 9133c10d
import React, { useState, useRef } from 'react';
import {
View,
Text,
TouchableWithoutFeedback,
StyleSheet,
Animated,
Easing,
} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
const AccordionListItem = ({ title, children }) => {
const [open, setOpen] = useState(false);
const animatedController = useRef(new Animated.Value(0)).current;
const [bodySectionHeight, setBodySectionHeight] = useState();
const bodyHeight = animatedController.interpolate({
inputRange: [0, 1],
outputRange: [0, bodySectionHeight],
});
const arrowAngle = animatedController.interpolate({
inputRange: [0, 1],
outputRange: ['0rad', `${Math.PI}rad`],
});
const toggleListItem = () => {
if (open) {
Animated.timing(animatedController, {
duration: 300,
toValue: 0,
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
}).start();
} else {
Animated.timing(animatedController, {
duration: 300,
toValue: 1,
easing: Easing.bezier(0.4, 0.0, 0.2, 1),
}).start();
}
setOpen(!open);
};
return (
<>
<TouchableWithoutFeedback onPress={() => toggleListItem()}>
<View style={styles.titleContainer}>
<Text>{title}</Text>
<Animated.View style={{ transform: [{ rotateZ: arrowAngle }] }}>
<MaterialIcons name="keyboard-arrow-down" size={20} color="black" />
</Animated.View>
</View>
</TouchableWithoutFeedback>
<Animated.View style={[styles.bodyBackground, { height: bodyHeight }]}>
<View
style={styles.bodyContainer}
onLayout={event =>
setBodySectionHeight(event.nativeEvent.layout.height)
}>
{children}
</View>
</Animated.View>
</>
);
};
export default AccordionListItem;
const styles = StyleSheet.create({
bodyBackground: {
backgroundColor: '#EFEFEF',
overflow: 'hidden',
},
titleContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1rem',
paddingLeft: '1.5rem',
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#EFEFEF',
},
bodyContainer: {
padding: '1rem',
paddingLeft: '1.5rem',
position: 'absolute',
bottom: 0,
},
});
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment