settings

TraCloSo/scr/Settings.js

@@ -8,6 +8,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import HeaderComponent from '../components/Header';
 import Constants from 'expo-constants';
 import { StatusBar } from 'expo-status-bar';
+import Icon from "react-native-vector-icons/MaterialIcons";
 
 
 export default function Settings() {
@@ -45,18 +46,17 @@ export default function Settings() {
       <TouchableOpacity 
         style={style.Accordion}
         key={'Language'}
-        onPress={() => {
-          setCurrentIndex(index)
-        }}
+        onPress={() => { }}
       >
         <View>
-          <Text style={style.title}>Language</Text>
-            {index === CurrentIndex && (
+          <View style={style.language}>
+            <Text style={{ fontSize: 25 }}>Language</Text>
+            <Icon name='keyboard-arrow-down' size={30} color='#767577' />
+          </View>  
             <View style={style.options}>
-              <Text>English</Text>
-              <Text>Nederlands</Text>
+              <Text style={style.taal}>English</Text>
+              <Text style={style.taal}>Nederlands</Text>
             </View>
-            )}
         </View>
       </TouchableOpacity>
     </View>
@@ -80,17 +80,31 @@ const style = StyleSheet.create({
     flexGrow: 1,
     paddingTop: 20,
   },
-  title: {
+  language: {
     textTransform: 'uppercase',
+    backgroundColor: "#E5E5E5",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: '25%',
+    paddingRight: '25%',
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  taal:{
+    fontSize: 20,
+    padding: 5,
   },
   options: {
+    padding: 10,
+    paddingLeft: 50,
   },
   row: {
-    flexGrow: 1,
+    flexGrow: 0.1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    fontSize: 25,
-    height: 50,
+    height: 20,
+    borderBottomWidth: 1,
   },
 })