Profile Component

LeftOvers/components/HeaderFlatList.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+
+type TitleProps = {
+    title: string
+}
+
+export default function ListTab(props: TitleProps) {
+  return (
+    <View style={styles.titleBar}>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 250,
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 12,
+    color: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'left',
+    textAlign: "left",
+    flex: 0.9,
+    padding: 5,
+  },
+});

LeftOvers/components/ListTab.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
 import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
 
 type ListProps = {
     title: string
@@ -18,12 +19,8 @@ const Item = ({title}: ItemProps) => (
 export default function ListTab(props: ListProps) {
   return (
     <View style={styles.background}>
-        <View style={styles.titleBar}>
-            <Text style={styles.title}>{props.title}</Text>
-            <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
-        </View>
         <View>
-            <FlatList data={props.content} renderItem={({item}) => <Item title={item.title}/>}/>
+            <FlatList data={props.content} renderItem={({item}) => <Item title={item.title}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
         </View>
     </View>
   );
@@ -36,6 +33,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#E3DEC9',
+    marginBottom: 20,
   },
   titleBar: {
     flexDirection: "row",