updated app component

ev_station/app/index.js

@@ -7,7 +7,7 @@ import * as Location from 'expo-location';
 import { NavigationContainer } from "@react-navigation/native";
 import HomeNavigator from "./Navigation/HomeNavigator";
 import { useEffect, useState } from "react";
-import { UserLocationContext } from "../app/Context/UserLocationContext";
+import { UserLocationContext } from "./context/UserLocationContext";
 
 
 const tokenCache = {

ev_station/app/misc/GlobalApi.js

@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+const BASE_URL = 'https://places.googleapis.com/v1/places:searchNearby';
+const API_KEY = process.env.EXPO_PUBLIC_GOOGLE_PLACE_API_KEY;
+
+const config = {
+    headers:{
+        'Content-Type': 'application/json',
+        'X-Goog-Api-Key': API_KEY,
+        'X-Goog-FieldMask': [
+            'places.displayName', 
+            'places.formattedAddress',
+            'places.location',
+            'places.evChargeOptions',
+            'places.photos'
+        ]
+    }
+}
+
+const NewNearByPlace = (data) => axios.post(BASE_URL, data, config).catch(function (error) {
+    console.log(error.toJSON());
+  });
+;
+
+export default{NewNearByPlace, API_KEY}

ev_station/app/screen/HomeScreen.jsx

@@ -1,11 +1,41 @@
 import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import MapViewScreen from "../screen/mapView/MapViewScreen";
-
 import HomeHeader from './HomeHeader';
 import HomeSearch from './HomeSearch';
+import { UserLocationContext } from '../context/UserLocationContext';
+import GlobalApi from '../misc/GlobalApi';
+import EVListView from '../screen/googleList/EVListView';
 
 const HomeScreen = () => {
+  const {location, setLocation} = useContext(UserLocationContext);
+  const [placeList, setPlaceList] = useState([]);
+
+  useEffect(() => {
+    location && GetNearByPlace();
+  },[location])
+
+  const GetNearByPlace = () => {
+    
+    const data = {
+      "includedTypes": ["electric_vehicle_charging_station"],
+      "maxResultCount": 10,
+      "locationRestriction": {
+      "circle": {
+        "center": {
+          "latitude": location?.latitude,
+          "longitude": location?.longitude
+          },
+          "radius": 5000.0
+        }
+      }
+    }
+    
+    GlobalApi.NewNearByPlace(data).then(res => {
+      console.log(JSON.stringify(res.data));
+      setPlaceList(res.data?.places);
+    })
+  } 
 
   return (
     <View style={{flex: 1, backgroundColor: 'white'}}>
@@ -13,8 +43,10 @@ const HomeScreen = () => {
         <HomeHeader />
         <HomeSearch searchedLocation={(location) => console.log(location)}/>  
       </View>
-      <MapViewScreen />  
+      {placeList && <MapViewScreen  placeList={placeList}/>}  
-      
+      <View style={{position: 'absolute', bottom: 0, zIndex: 20, width: '100%'}}>
+        {placeList && <EVListView placeList={placeList}/>}
+      </View>
     </View>
   )
 }

ev_station/app/screen/googleList/EVListView.jsx

@@ -0,0 +1,41 @@
+import { Dimensions, FlatList, StyleSheet, Text, View } from 'react-native'
+import React, { useEffect, useRef } from 'react'
+import ItemList from './ItemList'
+
+const EVListView = ({placeList}) => {
+  const flatListRef = useRef(null);
+
+  useEffect(() => {
+    //scrollToIndex();
+  }, [])
+
+  const scrollToIndex = (index) => {
+    flatListRef.current?.scrollToIndex({animated: true, index})
+  }
+
+  const getItemLayout = (_,index) => ({
+    length: Dimensions.get('window').width,
+    offset: Dimensions.get('window').width*index,
+    index
+  });
+
+  return (
+    <View>
+      <FlatList horizontal={true}
+        getItemLayout={getItemLayout}
+        data={placeList} 
+        showsHorizontalScrollIndicator={false} 
+        ref={flatListRef}
+        renderItem={({item, index}) => (
+          <View key={index}>
+            <ItemList place={item}/>
+          </View>
+        )}
+      />
+    </View>
+  )
+}
+
+export default EVListView
+
+const styles = StyleSheet.create({})

ev_station/app/screen/googleList/ItemList.jsx

@@ -0,0 +1,28 @@
+import { Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import GlobalApi from '@/app/misc/GlobalApi'
+
+const ItemList = ({place}) => {
+    const placePhoto_Base_Url = 'https://places.googleapis.com/v1/'
+
+  return (
+    <View style={{width: Dimensions.get('screen').width *0.85, height: 280, backgroundColor: 'white', marginLeft: 10, marginVertical: 5 ,borderRadius: 5, flexDirection: 'column', justifyContent: 'space-between'}}>
+        <Image source={place?.photos?{uri:placePhoto_Base_Url+place.photos[0].name+"/media?key="+GlobalApi.API_KEY+"&maxHeightPx=500&maxWidthPx=500"} 
+            : require('../../../assets/images/ev_images/EV.png')} style={{width: '100%', height: 120, objectFit: 'cover', borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
+        <View style={{padding: 10, flexDirection: 'column', justifyContent: 'space-between'}}>
+            <View>            
+                <Text style={{fontSize: 20, fontWeight: 600, color: '#379777'}}>{place.displayName.text}</Text>
+                <Text style={{marginTop: 5, color: '#45474B', fontWeight: 600, fontSize: 15}}>Total chargers: {place?.evChargeOptions?.connectorCount}</Text>
+                <Text style={{marginVertical: 5, color: '#45474B', fontSize: 15}}>{place?.formattedAddress}</Text>
+            </View>
+            <Pressable style={{backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', padding: 5, marginTop: 10, borderRadius: 5}}>
+                <Text style={{color: 'white', fontSize: 18, fontWeight: 500}}>Start</Text>
+            </Pressable>
+        </View>
+    </View>
+  )
+}
+
+export default ItemList
+
+const styles = StyleSheet.create({})

ev_station/app/screen/mapView/MapViewScreen.jsx

@@ -1,10 +1,11 @@
 import { Image, StyleSheet, Text, View } from 'react-native';
 import React, { useContext } from 'react';
 import MapView, { Marker, PROVIDER_DEFAULT} from 'react-native-maps';
-import { UserLocationContext } from '@/app/Context/UserLocationContext';
+import { UserLocationContext } from '@/app/context/UserLocationContext';
+import MarkerList from '../mapView/MarkerList';
 
 
-const MapViewScreen = () => {
+const MapViewScreen = ({placeList}) => {
 const {location, setLocation} = useContext(UserLocationContext)
 
 
@@ -12,17 +13,21 @@ const {location, setLocation} = useContext(UserLocationContext)
     <View>
       <MapView style={{width: '100%', height: '100%'}} 
         provider={PROVIDER_DEFAULT} 
-        showsUserLocation={true} 
         region={{
           latitude: location?.latitude,
           longitude: location?.longitude,
-          latitudeDelta: 0.05,
+          latitudeDelta: 0.1,
-          longitudeDelta: 0.05
+          longitudeDelta: 0.1
         }}
       >
-        <Marker coordinate={{latitude: location?.latitude, longitude: location?.longitude}}>
+        {location? <Marker coordinate={{latitude: location?.latitude, longitude: location?.longitude}}>
-          <Image source={require('../../../assets/images/ev_images/car.png')} style={{width: 70, height: 70}}/>
+          <Image source={require('../../../assets/images/ev_images/car.png')} style={{width: 50, height: 50}}/>
-        </Marker>
+        </Marker> : null}
+
+        {placeList && placeList.map((item, index) => (
+          <MarkerList key={index} place={item} index={index}/>
+        ))}
+
       </MapView>
     </View>
   )

ev_station/app/screen/mapView/MarkerList.jsx

@@ -0,0 +1,19 @@
+import { Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { Marker } from 'react-native-maps'
+
+const MarkerList = ({index, place}) => {
+  return place && (
+    <Marker onPress={() => {}}
+      coordinate={{
+        latitude: place.location?.latitude, 
+        longitude: place.location?.longitude
+      }}>
+      <Image source={require('../../../assets/images/ev_images/charging.png')} style={{width: 50, height: 50}}/>
+    </Marker>
+  )
+}
+
+export default MarkerList
+
+const styles = StyleSheet.create({})

ev_station/package-lock.json

@@ -11,6 +11,7 @@
         "@clerk/clerk-expo": "^2.0.0",
         "@expo/vector-icons": "^14.0.2",
         "@react-navigation/native": "^6.1.18",
+        "axios": "^1.7.2",
         "expo": "~51.0.22",
         "expo-constants": "~16.0.2",
         "expo-font": "~12.0.9",
@@ -7428,6 +7429,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -10210,6 +10234,25 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -15778,6 +15821,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

ev_station/package.json

@@ -18,6 +18,7 @@
     "@clerk/clerk-expo": "^2.0.0",
     "@expo/vector-icons": "^14.0.2",
     "@react-navigation/native": "^6.1.18",
+    "axios": "^1.7.2",
     "expo": "~51.0.22",
     "expo-constants": "~16.0.2",
     "expo-font": "~12.0.9",