google text input created

app/(root)/(tabs)/home.tsx

@@ -16,6 +16,7 @@ import { Map } from "@/components/map";
 import { RideCard } from "@/components/ride-card";
 import { icons, images } from "@/constants";
 import { useLocationStore } from "@/store";
+import { router } from "expo-router";
 
 const recentRides = [
   {
@@ -136,7 +137,17 @@ const Home = () => {
   const [hasPermissions, setHasPermissions] = useState(false);
 
   const handleSignOut = () => {};
-  const handleDestinationPress = () => {};
+  const handleDestinationPress = (location: {
+    latitude: number;
+    longitude: number;
+    address: string;
+  }) => {
+    setDestinationLocation(location);
+
+    console.log("Hello World!");
+
+    router.push("/(root)/find-ride");
+  };
 
   useEffect(() => {
     const requestLocation = async () => {

app/(root)/find-ride.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+const FindRide = () => {
+  return (
+    <View>
+      <Text>Find Ride</Text>
+    </View>
+  );
+};
+
+export default FindRide;

components/google-text-input.tsx

@@ -1,6 +1,8 @@
-import { Text, View } from "react-native";
+import { View, Image } from "react-native";
+import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
 
-import type { GoogleInputProps } from "@/types/type";
+import { icons } from "@/constants";
+import { GoogleInputProps } from "@/types/type";
 
 export const GoogleTextInput = ({
   icon,
@@ -8,10 +10,75 @@ export const GoogleTextInput = ({
   containerStyles,
   textInputBackgroundColor,
   handlePress,
-}: GoogleInputProps) => (
+}: GoogleInputProps) => {
+  const googlePlacesApiKey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY!;
+
+  console.log(googlePlacesApiKey);
+  return (
     <View
-    className={`flex flex-row items-center justify-center realtive z-50 rounded-xl mb-5 ${containerStyles}`}
+      className={`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyles}`}
     >
-    <Text>Google Text Input</Text>
+      <GooglePlacesAutocomplete
+        fetchDetails={true}
+        placeholder="Search"
+        debounce={200}
+        styles={{
+          textInputContainer: {
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 20,
+            marginHorizontal: 20,
+            position: "relative",
+            shadowColor: "#d4d4d4",
+          },
+          textInput: {
+            backgroundColor: textInputBackgroundColor
+              ? textInputBackgroundColor
+              : "white",
+            fontSize: 16,
+            fontWeight: "600",
+            marginTop: 5,
+            width: "100%",
+            borderRadius: 200,
+          },
+          listView: {
+            backgroundColor: textInputBackgroundColor
+              ? textInputBackgroundColor
+              : "white",
+            position: "relative",
+            top: 0,
+            width: "100%",
+            borderRadius: 10,
+            shadowColor: "#d4d4d4",
+            zIndex: 99,
+          },
+        }}
+        onPress={(data, details = null) => {
+          handlePress({
+            latitude: details?.geometry.location.lat!,
+            longitude: details?.geometry.location.lng!,
+            address: data.description,
+          });
+        }}
+        query={{
+          key: googlePlacesApiKey,
+          language: "en",
+        }}
+        renderLeftButton={() => (
+          <View className="justify-center items-center w-6 h-6">
+            <Image
+              source={icon ? icon : icons.search}
+              className="w-6 h-6"
+              resizeMode="contain"
+            />
           </View>
-);
+        )}
+        textInputProps={{
+          placeholderTextColor: "gray",
+          placeholder: initialLocation ?? "Where do you want to go?",
+        }}
+        onFail={console.log}
+      />
+    </View>
+  );
+};