27 lines
1.1 KiB
JavaScript
27 lines
1.1 KiB
JavaScript
|
import {Pressable, Text, View, Image} from "react-native";
|
||
|
|
import Chevron from '../assets/bi_chevron.svg'
|
||
|
|
import {useState} from "react";
|
||
|
|
|
||
|
|
const Accordion = ({title, children, ...props}) => {
|
||
|
|
const [active, setActive] = useState(true)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View {...props}>
|
||
|
|
<Pressable onPress={() => setActive(!active)}>
|
||
|
|
<View style={{display: "flex", flexDirection: "row", alignItems: "center", marginBottom: 16 }}>
|
||
|
|
<Text style={{fontSize: 16, fontWeight: "bold", marginRight: 16, paddingTop: 16, paddingBottom: 16}}>{title}</Text>
|
||
|
|
<Chevron width={20} height={20} style={{transform: [{rotate: active ? '180deg' : '0deg'}]}}/>
|
||
|
|
{/*<Image source={require('../assets/bi_chevron.svg')} style={{width: 20, height: 20, transform: [{rotate: active ? '180deg' : '0deg'}]}} />*/}
|
||
|
|
</View>
|
||
|
|
</Pressable>
|
||
|
|
|
||
|
|
<View style={
|
||
|
|
{display: active ? 'flex' : 'none', flexDirection: 'column'}
|
||
|
|
}>
|
||
|
|
{children}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Accordion;
|