Fix/your position

.env.sample

@@ -1,3 +1,3 @@
-HOST=https://gas-price-france-yaws.vercel.app/
+HOST=https://gas-price-france-yaws.vercel.app
 JAWG_API_KEY=
 MAPBOX_API_KEY=

README.md

@@ -37,10 +37,11 @@ In order to use Gas Prices, you must have Android studio on your computer ([Inst
    ```.env
     HOST=https://gas-price-france-yaws.vercel.app/
    ```
+
    OR
 
    - You can use it on local, follow [GasPrices-Api](https://github.com/titi0267/GasPrices-Api) guidelines
-     
+
    ```.env
     HOST=http://localhost:8080
    ```
@@ -57,13 +58,13 @@ In order to use Gas Prices, you must have Android studio on your computer ([Inst
    MAPBOX_API_KEY=
    ```
 
-4. Install the dependencies with npm
+3. Install the dependencies with npm
 
    ```bash
    npm i
    ```
 
-5. Extra steps for a physical device:
+4. Extra steps for a physical device:
    - Connect your device to your computer
    - Make sure to enable developer mode
    - Make sure to enable file transfert
@@ -75,13 +76,13 @@ Launch the project with
 
 ## Overview
 
-Navigate on the map | Search for your itinerary & your fuel | Display the gas stations along your itinerary
- --- | --- | ---
-<img src="src/assets//ReadMe/map-page.png" alt="Image 1" width="300"> | <img src="src/assets//ReadMe/search-page.png" alt="Image 2" width="300"> | <img src="src/assets//ReadMe/pumps-on-map.png" alt="Image 1" width="300">
+| Navigate on the map                                                   | Search for your itinerary & your fuel                                    | Display the gas stations along your itinerary                             |
+| --------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| <img src="src/assets//ReadMe/map-page.png" alt="Image 1" width="300"> | <img src="src/assets//ReadMe/search-page.png" alt="Image 2" width="300"> | <img src="src/assets//ReadMe/pumps-on-map.png" alt="Image 1" width="300"> |
 
-Click on one of the gas station | Check the lowest price | Redirect to maps and start driving
---- | --- | ---
- <img src="src/assets//ReadMe/click-on-pump.png" alt="Image 2" width="300"> | <img src="src/assets//ReadMe/pump-data.png" alt="Image 1" width="300"> | <img src="src/assets//ReadMe/redirect-to-maps.png" alt="Image 2" width="300">
+| Click on one of the gas station                                            | Check the lowest price                                                 | Redirect to maps and start driving                                            |
+| -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| <img src="src/assets//ReadMe/click-on-pump.png" alt="Image 2" width="300"> | <img src="src/assets//ReadMe/pump-data.png" alt="Image 1" width="300"> | <img src="src/assets//ReadMe/redirect-to-maps.png" alt="Image 2" width="300"> |
 
 ## About
 

android/app/build.gradle

@@ -1,5 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
 import com.android.build.OutputFile
 import groovy.json.JsonSlurper

package.json

@@ -19,10 +19,12 @@
     "@react-navigation/native-stack": "^6.9.17",
     "@rneui/themed": "^4.0.0-rc.7",
     "@rnmapbox/maps": "^10.0.5-rc.1",
+    "@turf/circle": "^6.5.0",
     "i": "^0.3.7",
     "npm": "^10.4.0",
     "react": "18.2.0",
     "react-native": "0.71.7",
+    "react-native-config": "^1.5.1",
     "react-native-dotenv": "^3.4.8",
     "react-native-elements": "^3.4.3",
     "react-native-linear-gradient": "^2.8.3",

src/Components/Input/index.tsx

@@ -11,8 +11,10 @@ const CustomInput = (props: {
   onChangeText: (value: string) => void;
   placeholder: string;
   inputValue?: string;
+  setIsFocused: (value: boolean) => void;
 }) => {
-  const {onClearInput, onChangeText, placeholder, inputValue} = props;
+  const {onClearInput, onChangeText, placeholder, inputValue, setIsFocused} =
+    props;
   return (
     <View style={inputStyles.container}>
       <TouchableOpacity
@@ -25,6 +27,12 @@ const CustomInput = (props: {
         />
       </TouchableOpacity>
       <TextInput
+        onBlur={() => {
+          setIsFocused(false);
+        }}
+        onFocus={() => {
+          setIsFocused(true);
+        }}
         style={[inputStyles.placeholder, inputStyles.input]}
         placeholder={placeholder}
         value={inputValue}

src/Pages/Map/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {JAWG_API_KEY, MAPBOX_API_KEY} from '@env';
 import {useEffect, useRef, useState} from 'react';
 import {useIsFocused, useRoute} from '@react-navigation/native';
 import getLocation from '../../services/getCurrentLocation';
@@ -18,8 +17,10 @@ import departmentCodeService from '../../services/departmentCode.service';
 import gasStationsService from '../../services/gasStations.service';
 import asyncStorageService from '../../services/asyncStorage.service';
 import CustomCard from '../../Components/Card';
+import circle from '@turf/circle';
+import Config from 'react-native-config';
 
-Mapbox.setAccessToken(MAPBOX_API_KEY);
+Mapbox.setAccessToken(Config.MAPBOX_API_KEY as string);
 
 const Map = () => {
   const route = useRoute();
@@ -39,6 +40,7 @@ const Map = () => {
   const [refinedStations, setRefinedStations] = useState<GasPump[] | null>(
     null,
   );
+  const [radius, setRadius] = useState(Math.pow(2, zoomLevel) * 100);
   const [isLoading, setIsLoading] = useState(true);
   const [departmentCodes, setDepartmentCodes] = useState<string[]>([]);
   const [gasType, setGasType] = useState<GasType | null>();
@@ -76,6 +78,7 @@ const Map = () => {
           end: end,
         },
         setGeoJson,
+        setIsLoading,
       );
     } else {
       setIsLoading(false);
@@ -152,6 +155,14 @@ const Map = () => {
     }
   }, [gasStations, gasType]);
 
+  const layerStyles = {
+    route: {
+      lineColor: '#00F5FD',
+      lineWidth: 1.5,
+      lineDasharray: [1, 0],
+    },
+  };
+
   useEffect(() => {
     if (refinedStations) {
       asyncStorageService.storeData('gasPumps', refinedStations as any[]);
@@ -162,21 +173,47 @@ const Map = () => {
     }
   }, [refinedStations, end, start]);
 
+  const handleRegionDidChange = async () => {
+    if (mapRef.current) {
+      const zoomLevel = await mapRef.current.getZoom();
+      console.log('Zoom level:', zoomLevel);
+      const radius = Math.pow(2, -zoomLevel) * 1000;
+      setRadius(radius > 0.5 ? 0.5 : radius);
+    }
+  };
+
   return (
     <View style={styles.page}>
       <Mapbox.MapView
         style={styles.map}
         ref={mapRef}
         logoEnabled={false}
         attributionEnabled={false}
-        styleURL={`https://tile.jawg.io/jawg-streets.json?access-token=${JAWG_API_KEY}`}>
+        onRegionIsChanging={handleRegionDidChange}
+        styleURL={`https://tile.jawg.io/jawg-streets.json?access-token=${Config.JAWG_API_KEY}`}>
         {isLoading == false || (!end && !start) ? (
           <Mapbox.Camera
             centerCoordinate={[location.longitude, location.latitude]}
             zoomLevel={mapRef.current ? zoomLevel : 0}></Mapbox.Camera>
         ) : (
           <></>
         )}
+        {location ? (
+          <Mapbox.ShapeSource
+            id="radiusSource"
+            shape={circle([location.longitude, location.latitude], radius, {
+              steps: 64,
+            })}>
+            <Mapbox.FillLayer id="radiusFill" style={{fillColor: '#001BFD'}} />
+            <Mapbox.LineLayer
+              id="radiusOutline"
+              style={layerStyles.route}
+              aboveLayerID="radiusFill"
+            />
+          </Mapbox.ShapeSource>
+        ) : (
+          <></>
+        )}
         {geoJson && (
           <Mapbox.ShapeSource
             id="source"