diff --git a/App.js b/App.js
index aaeb618..148cfb2 100644
--- a/App.js
+++ b/App.js
@@ -20,11 +20,12 @@ import {
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {enableScreens} from 'react-native-screens';
-import RNBootSplash from "react-native-bootsplash";
+import RNBootSplash from 'react-native-bootsplash';
import HomeScreen from './components/HomeScreen';
import BottomTab from './components/BottomTab';
import RegisterUserScreen from './components/RegisterUserScreen';
import LoginUserScreen from './components/LoginUserScreen.js';
+import SearchHouse from './components/SearchHouse.js';
const Section = ({children, title}): Node => {
const isDarkMode = useColorScheme() === 'dark';
@@ -56,8 +57,7 @@ const Stack = createStackNavigator();
const App = () => {
enableScreens();
- useEffect(() => {
- },[]);
+ useEffect(() => {}, []);
return (
RNBootSplash.hide()}>
@@ -81,6 +81,11 @@ const App = () => {
component={RegisterUserScreen}
options={{headerShown: false}}
/>
+
);
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index b8648fd..76e37fb 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -1,7 +1,7 @@
-
diff --git a/android/settings.gradle b/android/settings.gradle
index 9c07d19..f9f1397 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -3,7 +3,5 @@ include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
include ':react-native-sensitive-info'
project(':react-native-sensitive-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sensitive-info/android')
-include ':react-native-encrypted-storage'
-project(':react-native-encrypted-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-encrypted-storage/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
diff --git a/components/HomeScreen.js b/components/HomeScreen.js
index bfcf013..454b6b2 100644
--- a/components/HomeScreen.js
+++ b/components/HomeScreen.js
@@ -1,27 +1,38 @@
import React, {useState} from 'react';
-import {StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
+import {
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+ TouchableHighlight,
+} from 'react-native';
import {Icon} from 'react-native-elements';
-const HomeScreen = () => {
+const HomeScreen = ({navigation}) => {
const [token, setToken] = useState('');
return (
<>
-
+
Rental
-
-
- Home
-
+ navigation.navigate('SearchHouse')}
+ >
+
+
+
+ Home
+
@@ -41,7 +52,6 @@ const HomeScreen = () => {
);
};
-
const styles = StyleSheet.create({
viewRoot: {
backgroundColor: '#ffffff',
diff --git a/components/HouseLocation.js b/components/HouseLocation.js
index 53f82ae..b26442c 100644
--- a/components/HouseLocation.js
+++ b/components/HouseLocation.js
@@ -1,59 +1,104 @@
-import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import MapView, {PROVIDER_GOOGLE, Marker, Callout} from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
-const styles = StyleSheet.create({
- container: {
- ...StyleSheet.absoluteFillObject,
- height: '100%',
- width: '100%',
- justifyContent: 'center',
- alignItems: 'center',
- },
- map: {
- ...StyleSheet.absoluteFillObject,
- height: '100%',
- width: '100%',
- },
-});
+import * as React from 'react';
+import {Dimensions, StyleSheet, Text, View} from 'react-native';
+import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
+import MapView, {Callout, Circle, Marker} from 'react-native-maps';
+
+export default function HouseLocation() {
+ const [pin, setPin] = React.useState({
+ latitude: 37.78825,
+ longitude: -122.4324,
+ });
+ const [region, setRegion] = React.useState({
+ latitude: 37.78825,
+ longitude: -122.4324,
+ latitudeDelta: 0.0922,
+ longitudeDelta: 0.0421,
+ });
-const HouseLocation = () => {
- const [marker, setMarker] = React.useState({
- latitude: 37.78825,
- longitude: -122.4324,
- });
return (
-
+
+ {
+ // 'details' is provided when fetchDetails = true
+ console.log(data, details);
+ setRegion({
+ latitude: details.geometry.location.lat,
+ longitude: details.geometry.location.lng,
+ latitudeDelta: 0.0922,
+ longitudeDelta: 0.0421,
+ });
+ }}
+ query={{
+ key: 'AIzaSyCkyKVuTyTW8qIcmXuo-btO4lI0VzojzBE',
+ language: 'en',
+ components: 'country:in',
+ types: 'establishment',
+ radius: 30000,
+ location: `${region.latitude}, ${region.longitude}`,
+ }}
+ placeholderTextColor={'#845783'}
+ styles={{
+ container: {
+ flex: 0,
+ position: 'absolute',
+ width: '100%',
+ zIndex: 1,
+ backgroundColor: '#000000',
+ },
+ listView: {backgroundColor: 'white', color: 'blue'},
+ }}
+ />
+ latitudeDelta: 0.0922,
+ longitudeDelta: 0.0421,
+ }}
+ provider="google">
+ {
- setMarker({
- latitude: e.nativeEvent.coordinate.latitude,
- longitude: e.nativeEvent.coordinate.longitude,
-
- })
-
-
-
- }}
- >
-
- {marker.latitude.toFixed(3)}, {marker.longitude.toFixed(3)}
-
-
-
-
+ onDragStart={e => {
+ console.log('Drag start', e.nativeEvent.coordinates);
+ }}
+ onDragEnd={e => {
+ setPin({
+ latitude: e.nativeEvent.coordinate.latitude,
+ longitude: e.nativeEvent.coordinate.longitude,
+ });
+ }}>
+
+ I'm here
+
+
);
-};
-export default HouseLocation;
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ map: {
+ width: Dimensions.get('window').width,
+ height: Dimensions.get('window').height,
+ },
+});
diff --git a/components/SearchHouse.js b/components/SearchHouse.js
new file mode 100644
index 0000000..0e34d4d
--- /dev/null
+++ b/components/SearchHouse.js
@@ -0,0 +1,190 @@
+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 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,
+ },
+ {
+ name: 'lakeView Apartment 203',
+ categories: 'Beverages, Desserts, Cakes and Bakery',
+ deliveryTime: '45 min',
+ distance: '4.3 km',
+ image: require('../assets/house_2.jpg'),
+ id: 2,
+ },
+ {
+ name: 'Central Villas',
+ categories: 'Cakes and Bakery, American, Sandwiches, Burgers',
+ deliveryTime: '25 min',
+ distance: '3 km',
+ image: require('../assets/house_1.jpg'),
+ id: 3,
+ },
+ {
+ name: 'grand flat 405',
+ categories: 'Fast Food, Burgers, Desserts',
+ deliveryTime: '20 min',
+ distance: '2.5 km',
+ image: require('../assets/house_2.jpg'),
+ id: 4,
+ },
+ {
+ name: 'exlusive villa',
+ categories: 'Fast Food, Burgers, Desserts',
+ deliveryTime: '25 min',
+ distance: '3.1 km',
+ image: require('../assets/house_1.jpg'),
+ id: 5,
+ },
+];
+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()}
+ style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+
+
+ navigation.goBack()}
+ style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+
+
+
+
+ Find Homes
+
+
+
+ {/* */}
+
+ {
+ return ;
+ }}
+ keyExtractor={house => house.id.toString()}
+ showsVerticalScrollIndicator={false}
+ />
+
+
+
+ );
+};
+const styles = StyleSheet.create({
+ viewRoot: {
+ backgroundColor: '#ffffff',
+ justifyContent: 'center',
+ height: '100%',
+ flex: 1,
+ },
+ iconContainer: {
+ width: deviceWidth,
+ height: 60,
+ 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: 60,
+ textAlign: 'left',
+ fontFamily: 'Ubuntu-Bold',
+ },
+ subHeading: {
+ color: '#1C254E',
+ fontSize: 30,
+ textAlign: 'left',
+ fontFamily: 'Ubuntu-Regular',
+ },
+ pricingHeading: {
+ color: 'brown',
+ fontSize: 30,
+ textAlign: 'left',
+ fontFamily: 'Ubuntu-Regular',
+ paddingLeft: 10,
+ },
+ icon: {
+ alignSelf: 'flex-start',
+ marginLeft: '28%',
+ flexDirection: 'row',
+ },
+ cardContainer: {
+ flex: 1,
+ backgroundColor: 'white',
+ alignItems: 'center',
+ // justifyContent: 'center',
+ },
+});
+
+export default SearchHouse;
diff --git a/components/UserProfile.js b/components/UserProfile.js
index 2bff6f3..19dff8d 100644
--- a/components/UserProfile.js
+++ b/components/UserProfile.js
@@ -1,17 +1,7 @@
import React, {useState, useEffect} from 'react';
-import {
- StatusBar,
- StyleSheet,
- Text,
- View,
- TouchableHighlight,
- ScrollView,
- Dimensions,
- TouchableOpacity,
- FlatList,
-} from 'react-native';
-import {Icon} from 'react-native-elements';
-import HouseCard from './helpers/HouseCard'
+import {Icon, SearchBar} from 'react-native-elements';
+import {StatusBar, Dimensions, StyleSheet, Text, View, TouchableHighlight,FlatList} from 'react-native';
+import HouseCard from './helpers/HouseCard';
const deviceWidth = Math.round(Dimensions.get('window').width);
@@ -41,7 +31,7 @@ const homes = [
id: 3,
},
{
- name: "grand flat 405",
+ name: 'grand flat 405',
categories: 'Fast Food, Burgers, Desserts',
deliveryTime: '20 min',
distance: '2.5 km',
@@ -58,6 +48,40 @@ 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 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 (
<>
@@ -71,18 +95,32 @@ const UserProfile = ({navigation}) => {
navigation.goBack()}
style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
-
+
-
- John Doe
- Tenant
+
+
+ John Doe
+ Tenant
-
-
- Basic Member
-
-
+
+
+ Basic Member
+
+
{/* */}
@@ -92,7 +130,7 @@ const UserProfile = ({navigation}) => {
renderItem={({item}) => {
return ;
}}
- keyExtractor={restaurant => restaurant.id.toString()}
+ keyExtractor={house => house.id.toString()}
showsVerticalScrollIndicator={false}
/>
@@ -122,9 +160,8 @@ const styles = StyleSheet.create({
fontWeight: '700',
},
headingContainer: {
-
- marginLeft: 20,
- },
+ marginLeft: 20,
+ },
heading: {
color: '#1C254E',
fontSize: 60,
diff --git a/package.json b/package.json
index 1c95817..de934ef 100644
--- a/package.json
+++ b/package.json
@@ -11,16 +11,16 @@
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
- "@react-native-picker/picker": "^2.4.1",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
- "@rnmapbox/maps": "rnmapbox/maps#main",
+ "@rnmapbox/maps": "rnmapbox/maps",
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-bootsplash": "^4.1.5",
"react-native-elements": "^3.4.1",
"react-native-gesture-handler": "^1.10.3",
+ "react-native-google-places-autocomplete": "^2.4.1",
"react-native-maps": "^0.31.1",
"react-native-reanimated": "^2.2.0",
"react-native-safe-area-context": "^3.2.0",
diff --git a/yarn.lock b/yarn.lock
index f6d51d2..1e9271f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -294,9 +294,9 @@
"@babel/types" "^7.17.0"
"@babel/highlight@^7.10.4":
- version "7.17.9"
- resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
- integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+ version "7.17.12"
+ resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351"
+ integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==
dependencies:
"@babel/helper-validator-identifier" "^7.16.7"
chalk "^2.0.0"
@@ -852,9 +852,9 @@
strip-json-comments "^3.1.1"
"@expo/config-plugins@^4.0.3":
- version "4.1.4"
- resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.1.4.tgz#08e1a6314dc0f96cd165a748b5997b5ec75a84d0"
- integrity sha512-fkOjXnSieQfVSWVLKhst0DnCAyeHksvWky1CldFCQllhDB1HHBiP09Z8pamVB783n3qr/1HNZiSp6k2iUcaSoA==
+ version "4.1.5"
+ resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.1.5.tgz#9d357d2cda9c095e511b51583ede8a3b76174068"
+ integrity sha512-RVvU40RtZt12HavuDAe+LDIq9lHj7sheOfMEHdmpJ/uTA8pgvkbc56XF6JHQD+yRr6+uhhb+JnAasGq49dsQbw==
dependencies:
"@expo/config-types" "^45.0.0"
"@expo/json-file" "8.2.36"
@@ -1579,11 +1579,6 @@
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
-"@react-native-picker/picker@^2.4.1":
- version "2.4.1"
- resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.1.tgz#92feb7e0672d739624517dae04bf4de1452dfcdc"
- integrity sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==
-
"@react-native/assets@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
@@ -1653,9 +1648,9 @@
color "^3.1.3"
react-native-iphone-x-helper "^1.3.0"
-"@rnmapbox/maps@rnmapbox/maps#main":
- version "10.0.0-beta.1"
- resolved "https://codeload.github.com/rnmapbox/maps/tar.gz/1ea5cbf07cff5ec87499522f08d12f7a94a69077"
+"@rnmapbox/maps@rnmapbox/maps":
+ version "10.0.0-beta.9"
+ resolved "https://codeload.github.com/rnmapbox/maps/tar.gz/7f66133a6e492862443707d8b6434ee689c0dfe6"
dependencies:
"@expo/config-plugins" "^4.0.3"
"@mapbox/geo-viewport" ">= 0.4.0"
@@ -6250,6 +6245,11 @@ punycode@^2.1.0, punycode@^2.1.1:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+qs@~6.9.1:
+ version "6.9.7"
+ resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
+ integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
+
query-string@^6.13.6:
version "6.14.1"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -6343,6 +6343,15 @@ react-native-gesture-handler@^1.10.3:
invariant "^2.2.4"
prop-types "^15.7.2"
+react-native-google-places-autocomplete@^2.4.1:
+ version "2.4.1"
+ resolved "https://registry.yarnpkg.com/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.4.1.tgz#16b02a330890adf0232954a286f4c3203df06355"
+ integrity sha512-NJrzZ5zsguhTqe0C5tIW9PfxOn2wkWDiGYIBFksHzFOIIURxFPUlO0cJmfOjs5CBIDtMampgNXBdgADExBen5w==
+ dependencies:
+ lodash.debounce "^4.0.8"
+ prop-types "^15.7.2"
+ qs "~6.9.1"
+
react-native-iphone-x-helper@^1.3.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"