settings page

TraCloSo/components/AccordionListItem.js

+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

TraCloSo/scr/Settings.js

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