add two cols in profile

components/UserProfile.js

@@ -1,6 +1,14 @@
 import React, {useState, useEffect} from 'react';
 import {Icon, SearchBar} from 'react-native-elements';
-import {StatusBar, Dimensions, StyleSheet, Text, View, TouchableHighlight,FlatList} from 'react-native';
+import {
+  StatusBar,
+  Dimensions,
+  StyleSheet,
+  Text,
+  View,
+  TouchableHighlight,
+  FlatList,
+} from 'react-native';
 import HouseCard from './helpers/HouseCard';
 
 const deviceWidth = Math.round(Dimensions.get('window').width);
@@ -48,11 +56,11 @@ const homes = [
   },
 ];
 const UserProfile = ({navigation}) => {
-	const [search,setSearch] = React.useState("")
-	const [loading,setLoading] = React.useState(false)
-	const [searchData,setSearchData] = React.useState([])
-	const [tempSearchData,setTempSearchData] = React.useState([])
-	const [error,setError] = React.useState(null)
+  const [search, setSearch] = React.useState('');;
+  const [loading, setLoading] = React.useState(false);;
+  const [searchData, setSearchData] = React.useState([]);;
+  const [tempSearchData, setTempSearchData] = React.useState([]);;
+  const [error, setError] = React.useState(null);;
   const renderHeader = () => {
     return (
       <SearchBar
@@ -62,25 +70,27 @@ const UserProfile = ({navigation}) => {
         editable={true}
         value={search}
         onChangeText={setSearch}
-	platform="android"
+        platform="android"
       />
     );
   };
-const updateSearch = search => {
-        this.setState({ search }, () => {
-            if ('' == search) {
-                this.setState({
-                    data: [...this.state.temp]
-                });
-                return;
-            }
-             
-            this.state.data = this.state.temp.filter(function(item){
-                return item.name.includes(search);
-              }).map(function({id, name, email}){
-                return {id, name, email};
-            });
+  const updateSearch = search => {
+    this.setState({search}, () => {
+      if (search == '') {
+        this.setState({
+          data: [...this.state.temp],
         });
+        return;
+      }
+
+      this.state.data = this.state.temp
+        .filter(function (item) {
+          return item.name.includes(search);
+        })
+        .map(function ({id, name, email}) {
+          return {id, name, email};
+        });
+    });
   };
   return (
     <>
@@ -89,16 +99,14 @@ const updateSearch = search => {
         <View style={styles.iconContainer}>
           <TouchableHighlight
             onPress={() => navigation.goBack()}
-underlayColor="white"
-						activeOpacity={0.5}
-            >
+            underlayColor="white"
+            activeOpacity={0.5}>
             <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
           </TouchableHighlight>
           <TouchableHighlight
             onPress={() => navigation.goBack()}
-underlayColor="white"
-						activeOpacity={0.5}
-            >
+            underlayColor="white"
+            activeOpacity={0.5}>
             <Icon
               name="settings-outline"
               type="ionicon"
@@ -115,6 +123,17 @@ underlayColor="white"
             <Icon name="card-outline" type="ionicon" size={36} color="brown" />
             <Text style={[styles.pricingHeading]}>Basic Member</Text>
           </View>
+          <View style={{flexDirection: 'row', marginTop: 30,justifyContent: "space-evenly"}}>
+            <View style={styles.twoColContainer}>
+              <Text style={[styles.twoColHeading]}>Past Houses</Text>
+              <Text style={[styles.twoColNumber]}>3</Text>
+            </View>
+            <View style={styles.verticalLine} />
+            <View style={styles.twoColContainer}>
+              <Text style={[styles.twoColHeading]}>Requested</Text>
+              <Text style={[styles.twoColNumber]}>5</Text>
+            </View>
+          </View>
         </View>
         <View style={styles.cardContainer}>
           {/* <Card /> */}
@@ -172,7 +191,7 @@ const styles = StyleSheet.create({
   pricingHeading: {
     color: 'brown',
     fontSize: 30,
-    textAlign: 'left',
+    textAlign: 'center',
     fontFamily: 'Ubuntu-Regular',
     paddingLeft: 10,
   },
@@ -181,12 +200,36 @@ const styles = StyleSheet.create({
     marginLeft: '28%',
     flexDirection: 'row',
   },
+  twoColContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+		marginLeft: -40,
+  },
+  twoColHeading: {
+    color: '#1C254E',
+    fontSize: 28,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Regular',
+  },
+  twoColNumber: {
+    textAlign: 'center',
+    fontSize: 55,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Regular',
+    color: '#206ba5',
+  },
   cardContainer: {
     flex: 1,
     backgroundColor: 'white',
     alignItems: 'center',
     // justifyContent: 'center',
   },
+  verticalLine: {
+		marginLeft: -40,
+    height: '100%',
+    width: 5,
+    backgroundColor: '#206ba5',
+  },
 });
 
 export default UserProfile;