add House profile page

App.js

@@ -26,6 +26,7 @@ import BottomTab from './components/BottomTab';
 import RegisterUserScreen from './components/RegisterUserScreen';
 import LoginUserScreen from './components/LoginUserScreen.js';
 import SearchHouse from './components/SearchHouse.js';
+import HouseProfile from './components/HouseProfile.js';
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -86,6 +87,11 @@ const App = () => {
           component={SearchHouse}
           options={{headerShown: false}}
         />
+        <Stack.Screen
+          name="HouseProfile"
+          component={HouseProfile}
+          options={{headerShown: false}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

components/HomeScreen.js

@@ -37,7 +37,7 @@ underlayColor="white"
         </View>
           </TouchableHighlight>
           <TouchableHighlight
-            onPress={() => navigation.navigate('SearchHouse')}
+            onPress={() => navigation.navigate('HouseProfile')}
 underlayColor="white"
 						activeOpacity={0.5}
 						>

components/HouseProfile.js

@@ -0,0 +1,227 @@
+import React, {useState, useEffect} from 'react';
+import {Icon, SearchBar} from 'react-native-elements';
+import {
+  StatusBar,
+  Dimensions,
+  StyleSheet,
+  Text,
+  View,
+  TouchableHighlight,
+  FlatList,
+  Image,
+  ScrollView,
+} from 'react-native';
+import HouseCard from './helpers/HouseCard';
+const deviceWidth = Math.round(Dimensions.get('window').width);
+
+const homes = [
+  {
+    name: 'Prestiage Villas',
+    categories: 'Desserts, Cakes and Bakery',
+    deliveryTime: '35 min',
+    distance: '3.7 km',
+    image: require('../assets/house_1.jpg'),
+    id: 1,
+  },
+];
+const SearchHouse = ({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 renderHeader = () => {
+    return (
+      <SearchBar
+        placeholder="Search Here..."
+        lightTheme
+        round
+        editable={true}
+        value={search}
+        onChangeText={setSearch}
+        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};
+        });
+    });
+  };
+  return (
+    <>
+      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
+        <View style={styles.viewRoot}>
+      <ScrollView>
+          <View style={{width: '100%', backgroundColor: ''}}>
+            <TouchableHighlight
+              onPress={() => navigation.goBack()}
+              underlayColor="white"
+              activeOpacity={0.5}
+              style={{position: 'absolute', top: 20, left: 10, zIndex: 1}}>
+              <Icon
+                name="arrow-back"
+                type="ionicon"
+                size={36}
+                color="#206ba5"
+              />
+            </TouchableHighlight>
+            <TouchableHighlight
+              onPress={() => navigation.goBack()}
+              underlayColor="white"
+              activeOpacity={0.5}
+              style={{position: 'absolute', top: 20, right: 10, zIndex: 1}}>
+              <Icon
+                name="settings-outline"
+                type="ionicon"
+                size={36}
+                color="#206ba5"
+              />
+            </TouchableHighlight>
+            <Image
+              style={styles.imageStyle}
+              source={require('../assets/house_1.jpg')}
+            />
+          </View>
+          <View style={styles.headingContainer}>
+            <Text style={styles.heading}>Prestige Villas</Text>
+            <Text style={styles.subHeading}>This beautiful villa lies in a safe neighbourhood...</Text>
+
+            <View style={{flexDirection: 'row', marginTop: 30}}>
+              <Icon name="star" type="ionicon" size={36} color="gold" />
+              <Text style={[styles.locationHeading]}>3.89</Text>
+            </View>
+            <View style={{flexDirection: 'row', marginTop: 30}}>
+              <Icon
+                name="location-outline"
+                type="ionicon"
+                size={36}
+                color="#1C254E"
+              />
+              <Text style={[styles.locationHeading]}>Hyderabad, Telangana</Text>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                marginTop: 30,
+                justifyContent: 'space-evenly',
+              }}>
+              <View style={styles.twoColContainer}>
+                <Text style={[styles.twoColNumber]}>3</Text>
+                <Text style={[styles.twoColHeading]}>bedrooms</Text>
+              </View>
+              <View style={styles.twoColContainer}>
+                <Text style={[styles.twoColNumber]}>5</Text>
+                <Text style={[styles.twoColHeading]}>baths</Text>
+              </View>
+              <View style={styles.twoColContainer}>
+                <Text style={[styles.twoColNumber]}>5</Text>
+                <Text style={[styles.twoColHeading]}>carparks</Text>
+              </View>
+            </View>
+          </View>
+      </ScrollView>
+        </View>
+    </>
+  );
+};
+const styles = StyleSheet.create({
+  viewRoot: {
+    backgroundColor: '#ffffff',
+		height: "100%",
+    justifyContent: 'center',
+    flex: 1,
+  },
+  iconContainer: {
+    width: deviceWidth,
+    position: 'absolute',
+    zIndex: 1,
+    opacity: 0.1,
+    backgroundColor: 'white',
+    justifyContent: 'space-between',
+    paddingBottom: 20,
+    paddingLeft: 5,
+    paddingRight: 5,
+    flexDirection: 'row',
+  },
+  labelStyle: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  headingContainer: {
+    marginLeft: 20,
+  },
+  heading: {
+    color: '#1C254E',
+    fontSize: 45,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Bold',
+  },
+  subHeading: {
+    color: '#1C254E',
+    fontSize: 20,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Italic',
+  },
+  locationHeading: {
+    color: '#1C254E',
+    fontSize: 20,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu',
+    paddingLeft: 10,
+  },
+  icon: {
+    alignSelf: 'flex-start',
+    marginLeft: '28%',
+    flexDirection: 'row',
+  },
+  cardContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    // justifyContent: 'center',
+  },
+  twoColContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginLeft: -40,
+    borderWidth: 2,
+    borderRadius: 20,
+    padding: 10,
+    borderColor: '#1C254E',
+  },
+  twoColNumber: {
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+    padding: 10,
+    textAlign: 'center',
+    backgroundColor: '#1C254E',
+    color: 'white',
+    fontSize: 20,
+  },
+  twoColHeading: {
+    color: '#1C254E',
+    fontSize: 20,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Regular',
+  },
+  imageStyle: {
+    alignSelf: 'center',
+  },
+});
+
+export default SearchHouse;

components/UserProfile.js

@@ -137,16 +137,9 @@ const UserProfile = ({navigation}) => {
         </View>
         <View style={styles.cardContainer}>
           {/* <Card /> */}
-          <StatusBar barStyle="dark-content" />
 
-          <FlatList
+          <Text style={styles.cardHeading}>Current House</Text>
-            data={homes}
+              <HouseCard info={homes[1]} />
-            renderItem={({item}) => {
-              return <HouseCard info={item} />;
-            }}
-            keyExtractor={house => house.id.toString()}
-            showsVerticalScrollIndicator={false}
-          />
         </View>
       </View>
     </>
@@ -178,7 +171,15 @@ const styles = StyleSheet.create({
   },
   heading: {
     color: '#1C254E',
-    fontSize: 60,
+    fontSize: 50,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Bold',
+  },
+  cardHeading: {
+		marginLeft:20,
+		marginTop:50,
+    color: '#1C254E',
+    fontSize: 30,
     textAlign: 'left',
     fontFamily: 'Ubuntu-Bold',
   },
@@ -221,7 +222,7 @@ const styles = StyleSheet.create({
   cardContainer: {
     flex: 1,
     backgroundColor: 'white',
-    alignItems: 'center',
+    //alignItems: 'center',
     // justifyContent: 'center',
   },
   verticalLine: {

components/helpers/HouseCard.js

@@ -53,7 +53,6 @@ const styles = StyleSheet.create({
     width: deviceWidth - offset,
     borderTopLeftRadius: radius,
     borderTopRightRadius: radius,
-    opacity: 0.9,
     alignContent: 'center',
     alignSelf: 'center',
   },