diff --git a/App.js b/App.js index 148cfb2..fa84579 100644 --- a/App.js +++ b/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}} /> + ); diff --git a/components/HomeScreen.js b/components/HomeScreen.js index e4c1c93..3da6cdd 100644 --- a/components/HomeScreen.js +++ b/components/HomeScreen.js @@ -37,7 +37,7 @@ underlayColor="white" navigation.navigate('SearchHouse')} + onPress={() => navigation.navigate('HouseProfile')} underlayColor="white" activeOpacity={0.5} > diff --git a/components/HouseProfile.js b/components/HouseProfile.js new file mode 100644 index 0000000..1b3c9dd --- /dev/null +++ b/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 ( + + ); + }; + 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 ( + <> + + + + + navigation.goBack()} + underlayColor="white" + activeOpacity={0.5} + style={{position: 'absolute', top: 20, left: 10, zIndex: 1}}> + + + navigation.goBack()} + underlayColor="white" + activeOpacity={0.5} + style={{position: 'absolute', top: 20, right: 10, zIndex: 1}}> + + + + + + Prestige Villas + This beautiful villa lies in a safe neighbourhood... + + + + 3.89 + + + + Hyderabad, Telangana + + + + 3 + bedrooms + + + 5 + baths + + + 5 + carparks + + + + + + + ); +}; +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; diff --git a/components/UserProfile.js b/components/UserProfile.js index f39b55a..8bafe87 100644 --- a/components/UserProfile.js +++ b/components/UserProfile.js @@ -137,16 +137,9 @@ const UserProfile = ({navigation}) => { {/* */} - - { - return ; - }} - keyExtractor={house => house.id.toString()} - showsVerticalScrollIndicator={false} - /> + Current House + @@ -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: { diff --git a/components/helpers/HouseCard.js b/components/helpers/HouseCard.js index 77cbf96..3129030 100644 --- a/components/helpers/HouseCard.js +++ b/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', },