Commit 60ad6f06 authored by 7056117's avatar 7056117
Browse files

settings page

parent 35fa506c
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
......@@ -6,12 +6,15 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import HeaderComponent from '../components/Header';
import Constants from 'expo-constants';
import AccordionListItem from '../components/AccordionListItem';
export default function Settings() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch1 = () => setIsEnabled(previousState => !previousState);
const toggleSwitch2 = () => setIsEnabled(previousState => !previousState);
return (
<View style={style.container}>
<SafeAreaView style={style.Sheader}>
......@@ -38,6 +41,12 @@ export default function Settings() {
onValueChange={toggleSwitch2}
value={isEnabled}
/>
<AccordionListItem
style={style.Accordion}
title={'Language'}>
<Text>English</Text>
<Text>Nederlands</Text>
</AccordionListItem>
</View>
);
}
......@@ -55,4 +64,10 @@ const style = StyleSheet.create({
width: '100%',
flexDirection: 'row' //to display it 'rowwise'
},
Accordion: {
flex: 1,
padding: '2rem',
paddingTop: '5rem',
justifyContent: 'flex-start',
},
})
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