65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import { icons } from "@/constants";
|
|
import { GoogleInputProps } from "@/types/type";
|
|
import { Image, View } from "react-native";
|
|
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
|
|
import tw from "twrnc";
|
|
import 'react-native-get-random-values';
|
|
const googlePlacesApikey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY as string;
|
|
const GoogleInputField = ({ icon, initialLocation, containerStyle, textInputBackgroundColor, handlePress }: GoogleInputProps) => {
|
|
return (
|
|
<View style={tw`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyle || "" } mb-5`} >
|
|
<GooglePlacesAutocomplete fetchDetails={true}
|
|
placeholder="Where you want to go?"
|
|
debounce={200}
|
|
styles={{
|
|
textInputContainer: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: 20,
|
|
marginHorizontal: 20,
|
|
position: "relative",
|
|
shadowColor: "#d4d4d4",
|
|
},
|
|
textInput: {
|
|
backgroundColor: textInputBackgroundColor || "white",
|
|
fontSize: 16,
|
|
fontWeight: 600,
|
|
marginTop: 5,
|
|
width: "100%",
|
|
borderRadius: 200,
|
|
},
|
|
listView: {
|
|
backgroundColor: 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 style={tw`justify-center items-center w-6 h-6`}>
|
|
<Image source={icon ? icon:icons.search} style={tw`w-6 h-6`} resizeMode="contain" />
|
|
</View>
|
|
)}
|
|
textInputProps={{
|
|
placeholderTextColor:"gray",
|
|
placeholder: initialLocation ?? "where do you want to go?",
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
export default GoogleInputField; |