next map integrate with google

Satora1 · Oct 4, 2024 · c6a9515 · c6a9515
1 parent 3557814
commit c6a9515
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 10 deletions.
diff --git a/app/(root)/(tabs)/home.tsx b/app/(root)/(tabs)/home.tsx
@@ -1,8 +1,10 @@
 import RideCard from '@/components/RideCard'
 import { useUser } from '@clerk/clerk-expo'
-import { FlatList, View, Text, Image, ActivityIndicator } from 'react-native'
+import { FlatList, View, Text, Image, ActivityIndicator, TouchableOpacity } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { icons, images } from "@/constants";
+import GoogleTextInput from '@/components/GoogleTextInput';
+import Map from '@/components/map';
 
 export default function Page() {
   const recentRides = [
@@ -107,12 +109,13 @@ export default function Page() {
   ]
   const { user } = useUser()
   const loading = false
-  console.log(recentRides)
+  const handleSignOut = () => { }
+  const handleDestinationPress = () => { }
   return (
     <SafeAreaView className='bg-general-500'>
       <FlatList
         data={recentRides[0]?.slice(0, 5)}
-       // data={[]}
+        // data={[]}
         renderItem={({ item }) => <RideCard ride={item} />}
         className='px-5'
         keyboardShouldPersistTaps="handled"
@@ -128,16 +131,37 @@ export default function Page() {
               />
               <Text className='text-sm'>No recent Rides found</Text>
             </>) : (
-<ActivityIndicator size="small" color="#000"/>            )}
+              <ActivityIndicator size="small" color="#000" />)}
           </View>
         )}
-        ListHeaderComponent={()=>(
+        ListHeaderComponent={() => (
           <>
-          <View className='flex flex-row items-center justify-between my-5'>
-<Text className='text-2xl'>
-  Welcome {user?.firstName || user?.emailAddresses[0].emailAddress}
-  </Text>
-          </View>
+            <View className='flex flex-row items-center justify-between my-5'>
+              <Text className='text-2xl capitalize font-JakartaExtraBold'>
+                Welcome {user?.firstName || user?.emailAddresses[0].emailAddress.split("@")[0]}{" "}
+              </Text>
+              <TouchableOpacity
+                onPress={handleSignOut}
+                className='jsutify-center items-center
+               w-10 h-10 rounded-full bg-white'>
+                <Image source={icons.out} className='w-4 h-4' />
+              </TouchableOpacity>
+            </View>
+            <GoogleTextInput
+              icon={icons.search}
+              containerStyle="bg-white shadow-md shadow-neutral-300"
+              handlePress={handleDestinationPress}
+            />
+            <>
+              <Text className="text-xl font-JakartaBold mt-5 mb-3">
+                Your Current Location
+              </Text>
+              <View className='flex flex-row items-center bg-transparent h-[300px]'>
+                <Map />
+              </View>
+            </>
+            <Text className="text-xl font-JakartaBold mt-5 mb-3">
+              Recent Rides              </Text>
           </>
         )}
       />

diff --git a/components/GoogleTextInput.tsx b/components/GoogleTextInput.tsx
@@ -0,0 +1,15 @@
+import { GoogleInputProps } from '@/types/type'
+import React from 'react'
+import { View, Text } from 'react-native'
+
+const GoogleTextInput = ({ icon, initialLocation, containerStyle, textInputBackgroundColor, handlePress }: GoogleInputProps) => {
+    return (
+        <View className={`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyle} mb-5`}>
+            <Text>
+                Search
+            </Text>
+        </View>
+    )
+}
+
+export default GoogleTextInput
diff --git a/components/map.tsx b/components/map.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+const Map = () => {
+  return (
+   <View>
+    <Text>
+        Map
+    </Text>
+   </View>
+  )
+}
+
+export default Map