settings

TraCloSo/scr/Settings.js

 import * as React from 'react';
 import { useState } from "react";
-import { StyleSheet, Text, Switch, View } from 'react-native';
+import { StyleSheet, Text, Switch, View, TouchableOpacity } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 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';
+import { StatusBar } from 'expo-status-bar';
+
 
 export default function Settings() {
     const [isEnabled, setIsEnabled] = useState(false);
@@ -20,33 +21,44 @@ export default function Settings() {
         <SafeAreaView style={style.Sheader}>
           <Text style={{ fontSize: 30 }}>Settings</Text>
         </SafeAreaView>
-      <Text style={{ fontSize: 25, textAlign: 'left' }}>Dark mode</Text>
-      <Text></Text>
-      <Text style={{ fontSize: 25 }}>Notifications</Text>
-      <Text></Text>
-      <Text style={{ fontSize: 25 }}>Language</Text>
-      <Text></Text>
-      <Switch
-        trackColor={{ false: "#767577", true: "#A5D6AA" }}
-        thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
-        ios_backgroundColor="#E5E5E5"
-        onValueChange={toggleSwitch1}
-        value={isEnabled}
-      />
-      <Text></Text>
-      <Switch
-        trackColor={{ false: "#767577", true: "#A5D6AA" }}
-        thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
-        ios_backgroundColor="#E5E5E5"
-        onValueChange={toggleSwitch2}
-        value={isEnabled}
-      />
-      <AccordionListItem 
+      <View style={style.row}> 
+        <Text style={{ fontSize: 25}} >Dark mode</Text>
+        <Switch
+          trackColor={{ false: "#767577", true: "#A5D6AA" }}
+          thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
+          ios_backgroundColor="#E5E5E5"
+          onValueChange={toggleSwitch1}
+          value={isEnabled}
+        />
+      </View>
+      <View style={style.row}>
+        <Text style={{ fontSize: 25 }}>Notifications</Text>
+        <Switch
+          trackColor={{ false: "#767577", true: "#A5D6AA" }}
+          thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
+          ios_backgroundColor="#E5E5E5"
+          onValueChange={toggleSwitch2}
+          value={isEnabled}
+        />
+      </View>
+      <Text/>
+      <TouchableOpacity 
         style={style.Accordion}
-        title={'Language'}>
-        <Text>English</Text>
-        <Text>Nederlands</Text>
-      </AccordionListItem>
+        key={'Language'}
+        onPress={() => {
+          setCurrentIndex(index)
+        }}
+      >
+        <View>
+          <Text style={style.title}>Language</Text>
+            {index === CurrentIndex && (
+            <View style={style.options}>
+              <Text>English</Text>
+              <Text>Nederlands</Text>
+            </View>
+            )}
+        </View>
+      </TouchableOpacity>
     </View>
   );
 }
@@ -65,9 +77,20 @@ const style = StyleSheet.create({
   	flexDirection: 'row' //to display it 'rowwise'
   },
   Accordion: {
-    flex: 1,
-    padding: '2rem',
-    paddingTop: '5rem',
-    justifyContent: 'flex-start',
+    flexGrow: 1,
+    paddingTop: 20,
+  },
+  title: {
+    textTransform: 'uppercase',
+  },
+  options: {
+  },
+  row: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: 25,
+    height: 50,
   },
 })