Skip to content

Bug Report #969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task
sushant705 opened this issue Apr 3, 2025 · 8 comments
Open
1 task

Bug Report #969

sushant705 opened this issue Apr 3, 2025 · 8 comments
Labels
bug

Comments

@sushant705
Copy link

//plantrip file latstudated working
import { StyleSheet, Text, View ,SafeAreaView, ScrollView, Image, Pressable,TextInput} from 'react-native'
import React, { useState } from 'react'
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
import { useRoute } from '@react-navigation/native'
import 'react-native-get-random-values'
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import moment from 'moment';
import {BottomModal, ModalContent,SlideAnimation } from 'react-native-modals';
import axios from 'axios';

const TripPlanScreen = () => {
const route = useRoute();
const [option,setOption] = useState("Overview");

const formatDate = (date) => {
    return moment(date).format("DD MMMM ")
};

const tripId = route?.params?.item?._id;
const [modalVisible,setModalVisible] = useState(false);
const fetchPlaceDetails = async(placeId) => {
    console.log("hey");
    try{
     const response = await axios.post('http://10.0.2.2:8000/trip/${tripId}/addPlace',{
        placeId:placeId,
     },
    );

    console.log("updated trip",response.data);

    if(response.status == 200){
        setModalVisible(false);
    }
    } catch(error){
        console.log("Error",error);
    }
}

return (

<>
<SafeAreaView>
  <ScrollView>
    <View style={{marginTop:50}}>
 
    <Image style={{width:"100%",height:200,resizeMode:'cover'}} source={{uri:"https://plus.unsplash.com/premium_photo-1661964177687-57387c2cbd14?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bW91bnQlMjBmdWppfGVufDB8fDB8fHww"}} />
       <View>
        <View>
            <Pressable style={{padding:15,backgroundColor:"white",width:300,marginLeft:"auto",marginRight:"auto",borderRadius:10,position:"absolute",top:-100,left:"50%",transform:[{translateX:-150}],shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5}}>
                <Text numberOfLines={1} style={{textAlign:"left",fontSize:22,fontWeight:"bold"}}>Trip To {route?.params?.item?.tripName}</Text>
                <View style={{marginTop:8}}>
                    <View>
                        <Text style={{fontWeight:"500"}}>{route?.params?.item?.startDate} -{' '} {route?.params?.item?.endDate}</Text>
                        <Text style={{marginTop:4,color:"gray"}}>{route?.params?.item?.startDay} -{' '} {route?.params?.item?.endDay}</Text>
                    </View>
                    <View style={{marginTop:8}}>
                        <View style={{flexDirection:"row",alignItems:"center",gap:10}}>
                            <Image style={{width:34,height:34,borderRadius:17}} source={{uri:"https://imgs.search.brave.com/6yaHU6LDNwZ9rgKtgVO5G32EdSM-VIFEcdbpWwzLlT0/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9zLm5k/dHZpbWcuY29tLy9p/bWFnZXMvZW50aXRp/ZXMvMTIwL3ZpcmF0/LWtvaGxpLTk2Ny5w/bmc"}} />
                            <Pressable style={{paddingHorizontal:10,paddingVertical:8,borderRadius:25,alignSelf:"flex-start",backgroundColor:"black"}}>
                       <Text style={{textAlign:"center",color:"white",fontSize:12,fontWeight:"500"}}>Share</Text>
                        </Pressable>
                        </View>
                        
                    </View>
                </View>
            </Pressable>
            
        </View>
       </View>
       <View style={{backgroundColor:"white",height:80,zIndex:-100}} />

       <View style={{flexDirection:"row",alignItems:"center",gap:25,justifyContent:"space-around",backgroundColor:"white",padding:12}}>
        <Pressable onPress={() => setOption("Overview")}>
            <Text style={{fontSize:16,fontWeight:"500",color:option =="Overview" ? "#ed6509" : "gray"}}>Overview</Text>
        </Pressable>
       < Pressable onPress={() => setOption("Itinerary")}>
            <Text style={{fontSize:16,fontWeight:"500",color:option =="Itinerary" ? "#ed6509" : "gray"}}>Itinerary</Text>
        </Pressable>
        <Pressable onPress={() => setOption("Explore")}>
            <Text style={{fontSize:16,fontWeight:"500",color:option =="Explore" ? "#ed6509" : "gray"}}>Explore</Text>
        </Pressable>

        <Pressable onPress={() => setOption("$")}>
            <Text style={{fontSize:16,fontWeight:"500",color:option =="$" ? "#ed6509" : "gray"}}>$</Text>
        </Pressable>
       </View>

       <View>
        {option == "Overview" && (
            <ScrollView style={{marginTop:15,borderRadius:10}}>
                <View style={{backgroundColor:"white",padding:12}}>
                    <View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                        <View style={{flexDirection:"row",alignItems:"center",gap:5}}>
                             <AntDesign name="down" size={20} color="black" />
                             <Text style={{fontSize:15,fontWeight:"bold"}}>Notes</Text>
                        </View>
                     
                        <AntDesign name="ellipsis1" size={25} color="gray" />

                    </View>
                    <View style={{marginTop:10}}>
                        <Text style={{fontWeight:"500",fontStyle:"italic",color:"gray"}}>Write or Paste general notes here, e.g how to get</Text>
                    </View>
                </View>

                <View style={{padding:12,backgroundColor:"white",marginVertical:15}}>
                    <View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                    <View style={{flexDirection:"row",alignItems:"center",gap:5}}>
                    <AntDesign name="down" size={20} color="black" />
                    <Text style={{fontSize:15,fontWeight:"bold"}}>Places to Visit</Text>
                    </View>
                    <AntDesign name="ellipsis1" size={25} color="gray" />
                    </View>
                    
                    <View style={{marginTop:10,flexDirection:"row",alignItems:"center",gap:10}}>
                        <Pressable onPress={() => setModalVisible(!modalVisible)} style={{padding:10,borderRadius:10,backgroundColor:"#F0F0F0",flexDirection:"row",alignItems:"center",gap:5,flex:1}}>
                        <Ionicons name="location" size={20} color="gray" />
                        <TextInput placeholder='Add a place' />
                        </Pressable>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="attach" size={20} color="black" />
                    </View>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="map" size={20} color="black" />
                    </View>


                    </View>

                  <Text style={{fontSize:15,fontWeight:"500",marginLeft:10,marginTop:15}}>Recommended Places</Text>

                </View>

                <View style={{padding:12,backgroundColor:"white"}}>
                    <View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                    <View style={{flexDirection:"row",alignItems:"center",gap:5}}>
                    <AntDesign name="down" size={20} color="black" />
                    <Text style={{fontSize:15,fontWeight:"bold"}}>Add a Title</Text>
                    </View>
                    <AntDesign name="ellipsis1" size={25} color="gray" />
                    </View>
                    
                    <View style={{marginTop:10,flexDirection:"row",alignItems:"center",gap:10}}>
                        <Pressable style={{padding:10,borderRadius:10,backgroundColor:"#F0F0F0",flexDirection:"row",alignItems:"center",gap:5,flex:1}}>
                        <Ionicons name="location" size={20} color="gray" />
                        <TextInput placeholder='Add a Title' />
                        </Pressable>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="attach" size={20} color="black" />
                    </View>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="map" size={20} color="black" />
                    </View>


                    </View>

                 

                </View>

            </ScrollView>
        )}
       </View>

      <View>
        {option == "Itinerary" && (
            <ScrollView style={{marginTop:15,marginHorizontal:5}}>
                <View style={{flexDirection:"row",alignItems:"center",gap:10}}>
                    {route?.params?.item?.itinerary.map((item,index) => (
                        <View key={index} style={{padding:10,borderRadius:12,marginBottom:7,backgroundColor:"orange",marginVertical:10}}>
                            <Text style={{fontSize:15,fontWeight:"500",textAlign:"center",color:"white"}}>{formatDate(item?.date)}</Text>
                        </View>
                    ))}
                </View>

             <View>
                {route?.params?.item?.itinerary?.map((item,index) => (
                    <View key={index} style={{borderRadius:8,marginBottom:7,backgroundColor:"white",marginVertical:10,padding:15}}>
                        <View style={{flexDirection:"row",alignItems:"center",gap:8}}>
                            <Text style={{fontSize:27,fontWeight:"bold"}}>{formatDate(item?.date)}</Text>
                            <Text style={{fontSize:14,fontWeight:"500",color:"gray"}}>Ad sub heading</Text>
                        </View>
                        <View style={{marginTop:10,flexDirection:"row",alignItems:"center",gap:10}}>
                        <Pressable style={{padding:10,borderRadius:10,backgroundColor:"#F0F0F0",flexDirection:"row",alignItems:"center",gap:5,flex:1}}>
                        <Ionicons name="location" size={20} color="gray" />
                        <TextInput placeholder='Add a Title' />
                        </Pressable>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="attach" size={20} color="black" />
                    </View>

                    <View style={{width:44,borderRadius:17,height:44,justifyContent:"center",alignItems:"center",backgroundColor:"#F0F0F0"}}>
                    <Ionicons name="map" size={20} color="black" />
                    </View>


                    </View>
                    </View>
                    
                    
                ) )}
                
             </View>
             

            </ScrollView>
        )}
      </View>
      
      <View>
        {option =="Explore" && (
            <ScrollView style={{marginTop:15,borderRadius:10,marginHorizontal:12}}>
                <View style={{padding:10,backgroundColor:"#E0E0E0",flexDirection:"row",alignItems:"center",gap:5}}>
                <Ionicons name="search" size={25} color="gray" />
                <Text>{route?.params?.item?.tripName}</Text>

                </View>
                
                <View style={{marginTop:12}}>
                    <View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
                        <Text style={{fontSize:15,fontWeight:"bold"}}>Categories</Text>
                        <Text style={{fontSize:15,fontWeight:"bold"}}>See all</Text>
                    </View>
                </View>
             <View style={{flexDirection:"row",alignItems:"center",gap:10,marginTop:15}}>
                <View style={{backgroundColor:"#E8E8E8",padding:12,borderRadius:7,flex:1}}>
                    <Text style={{fontSize:15}}>🍽️ Restaurants</Text>
                </View>
                <View style={{backgroundColor:"#E8E8E8",padding:12,borderRadius:7,flex:1}}>
                    <Text style={{fontSize:15}}>☕ Cafes</Text>
                </View>
             </View>

             <View style={{flexDirection:"row",alignItems:"center",gap:10,marginTop:15}}>
                <View style={{backgroundColor:"#E8E8E8",padding:12,borderRadius:7,flex:1}}>
                    <Text style={{fontSize:15}}>🤑 Cheap rates</Text>
                </View>
                <View style={{backgroundColor:"#E8E8E8",padding:12,borderRadius:7,flex:1}}>
                    <Text style={{fontSize:15}}>✈️ Travel</Text>
                </View>
             </View>
             <View style={{marginTop:10}} >
                <Text style={{fontSize:15,fontWeight:"bold"}}>Video Guides</Text>
                <View style={{flexDirection:"row",alignItems:"center",gap:10}}>
                    <View style={{flex:1}}>
                        <Image style={{width:160,height:110,resizeMode:'cover'}} 
                        source={{uri:"https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Youtube2_colored_svg-128.png"}} />
                    </View>

                    <View style={{flex:1}}>
                        <Image style={{width:160,height:110,resizeMode:'cover'}} 
                        source={{uri:"https://1000logos.net/wp-content/uploads/2017/02/Instagram-app-logo-768x581.jpg"}}/>
                    </View>
                </View>
             </View>
            </ScrollView>
        )}
      </View>

    </View>
    
  </ScrollView>
</SafeAreaView>

<BottomModal swipeDirection={["up","down"]} swipeTreshold={200} modalAnimation={new SlideAnimation({slideFrom:"bottom",})} 
visible={modalVisible} onTouchOutside={() => setModalVisible(!modalVisible)} onHardwareBackPress={() => setModalVisible(!modalVisible)}>
      <ModalContent style={{width:"100%",height:600,backgroundColor:"#F8F8F8"}}>
        <Text style={{textAlign:"center",fontWeight:"bold"}}>Add a Place</Text>

        <View>
        <GooglePlacesAutocomplete styles={{
         container:{
            flex:0,
            marginTop:10,
            width:"90%",
            borderRadius:20,
            borderColor:"#D0D0D0",
            borderWidth:1,
            marginTop:20
         },
         textInput:{
            height:38,
            color:"#5d5d5d",
            fontSize:16,
            borderRadius:24
         },
         textInputContainer:{
                 borderRadius:20,
         },
        }}
        placeholder='Search'
        fetchDetails={true}
        onPress={(data,details=null) =>{
            console.log("Selected Place:", data);
            
            if(details){
                console.log("this runs");
                const placeId= details.place_id;
                fetchPlaceDetails(placeId);
            }

        } }
        

        query={{
            key:"",
            language:"en",
        }}
        textInputProps={{
            onFocus: () => {},
            onBlur: () => {},
        }}
        predefinedPlaces={[]}
        
        />
     </View>

      </ModalContent>
</BottomModal>

</>

);
};

export default TripPlanScreen;

const styles = StyleSheet.create({})

/////////////////////////////////////////////////////
This is my complete code for the file where i am using Googleplacesautocomplete but when i execute it i am not able to see drop down in the add section that is it is not working for me , I have tried uninstalling and reinstalling it etc. but still it is not working for me , and earlier when i was trying to run my app without predefined places , textinputprops then i was getting error in console that was cannot read property 'filter' of undefined .............................

/////PLEASE SOMEONE SOLVE MY ISSUE .
;

Additional context

  • React Native Version: [e.g. 0.78.0]

  • Android

I am using react native cli

Add any other context about the problem here, screenshots etc
@sushant705 sushant705 added the bug label Apr 3, 2025
@brijeshbhikadiya
Copy link

I've been facing the same issue for a week now, but still haven't found a solution.

@sushant705
Copy link
Author

I've been facing the same issue for a week now, but still haven't found a solution.

Bro don't worry i got you ,, See just check in postman if your Api is working there without any issue and you have installed googleplaces autocomplete and if not sure reinstall it .................. ////
/////Then here is the solution
just add you code inside a scrollview that will definately fix your issue: ::: let me give you a snippet of it ::::----------

/////Just look how Googleplaces autcomplete is tailored correctly ,,, this will definately solve your issue::

return (
<>


<View style={{ marginTop: 50 }}>
<Image
style={{ width: "100%", height: 200, resizeMode: 'cover' }}
source={{ uri: "https://plus.unsplash.com/premium_photo-1661964177687-57387c2cbd14?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bW91bnQlMjBmdWppfGVufDB8fDB8fHww" }}
/>

<Pressable style={{
padding: 15,
backgroundColor: "white",
width: 300,
marginLeft: "auto",
marginRight: "auto",
borderRadius: 10,
position: "absolute",
top: -100,
left: "50%",
transform: [{ translateX: -150 }],
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
}}>
<Text numberOfLines={1} style={{ textAlign: "left", fontSize: 22, fontWeight: "bold" }}>Trip To {route?.params?.item?.tripName}
<View style={{ marginTop: 8 }}>

<Text style={{ fontWeight: "500" }}>{route?.params?.item?.startDate} -{' '} {route?.params?.item?.endDate}
<Text style={{ marginTop: 4, color: "gray" }}>{route?.params?.item?.startDay} -{' '} {route?.params?.item?.endDay}

<View style={{ marginTop: 8 }}>
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
<Image style={{ width: 34, height: 34, borderRadius: 17 }} source={{ uri: "https://imgs.search.brave.com/6yaHU6LDNwZ9rgKtgVO5G32EdSM-VIFEcdbpWwzLlT0/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9zLm5k/dHZpbWcuY29tLy9p/bWFnZXMvZW50aXRp/ZXMvMTIwL3ZpcmF0/LWtvaGxpLTk2Ny5w/bmc" }} />
<Pressable style={{ paddingHorizontal: 10, paddingVertical: 8, borderRadius: 25, alignSelf: "flex-start", backgroundColor: "black" }}>
<Text style={{ textAlign: "center", color: "white", fontSize: 12, fontWeight: "500" }}>Share






<View style={{ backgroundColor: "white", height: 80, zIndex: -100 }} />

                    {/* Tab Selection */}
                    <View style={{ flexDirection: "row", alignItems: "center", gap: 25, justifyContent: "space-around", backgroundColor: "white", padding: 12 }}>
                        <Pressable onPress={() => setOption("Overview")}>
                            <Text style={{ fontSize: 16, fontWeight: "500", color: option == "Overview" ? "#ed6509" : "gray" }}>Overview</Text>
                        </Pressable>
                        <Pressable onPress={() => setOption("Itinerary")}>
                            <Text style={{ fontSize: 16, fontWeight: "500", color: option == "Itinerary" ? "#ed6509" : "gray" }}>Itinerary</Text>
                        </Pressable>
                        <Pressable onPress={() => setOption("Explore")}>
                            <Text style={{ fontSize: 16, fontWeight: "500", color: option == "Explore" ? "#ed6509" : "gray" }}>Explore</Text>
                        </Pressable>
                        <Pressable onPress={() => setOption("$")}>
                            <Text style={{ fontSize: 16, fontWeight: "500", color: option == "$" ? "#ed6509" : "gray" }}>$</Text>
                        </Pressable>
                    </View>

                    {/* Tab Content */}
                    <View>
                        {option == "Overview" && (
                            <ScrollView style={{ marginTop: 15, borderRadius: 10 }}>
                                <View style={{ backgroundColor: "white", padding: 12 }}>
                                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                                        <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
                                            <AntDesign name="down" size={20} color="black" />
                                            <Text style={{ fontSize: 15, fontWeight: "bold" }}>Notes</Text>
                                        </View>
                                        <AntDesign name="ellipsis1" size={25} color="gray" />
                                    </View>
                                    <View style={{ marginTop: 10 }}>
                                        <Text style={{ fontWeight: "500", fontStyle: "italic", color: "gray" }}>Write or Paste general notes here, e.g how to get</Text>
                                    </View>
                                </View>

                                <View style={{ padding: 12, backgroundColor: "white", marginVertical: 15 }}>
                                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                                        <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
                                            <AntDesign name="down" size={20} color="black" />
                                            <Text style={{ fontSize: 15, fontWeight: "bold" }}>Places to Visit</Text>
                                        </View>
                                        <AntDesign name="ellipsis1" size={25} color="gray" />
                                    </View>

                             <View>
                                {places && places?.map((item,index) =>(
                                    <Place key={item._id || index} index={index} item={item} items={items} setItems = {setItems}/>
                                ))}
                             </View>

                                    <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", gap: 10 }}>
                                        <Pressable onPress={() => setModalVisible(!modalVisible)} style={{ padding: 10, borderRadius: 10, backgroundColor: "#F0F0F0", flexDirection: "row", alignItems: "center", gap: 5, flex: 1 }}>
                                            <Ionicons name="location" size={20} color="gray" />
                                            <TextInput placeholder='Add a place' />
                                        </Pressable>
                                        <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                            <Ionicons name="attach" size={20} color="black" />
                                        </View>
                                        <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                            <Ionicons name="map" size={20} color="black" />
                                        </View>
                                    </View>
                                    <Text style={{ fontSize: 15, fontWeight: "500", marginLeft: 10, marginTop: 15 }}>Recommended Places</Text>
                                </View>

                                <View style={{ padding: 12, backgroundColor: "white" }}>
                                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                                        <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
                                            <AntDesign name="down" size={20} color="black" />
                                            <Text style={{ fontSize: 15, fontWeight: "bold" }}>Add a Title</Text>
                                        </View>
                                        <AntDesign name="ellipsis1" size={25} color="gray" />
                                    </View>
                                    <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", gap: 10 }}>
                                        <Pressable style={{ padding: 10, borderRadius: 10, backgroundColor: "#F0F0F0", flexDirection: "row", alignItems: "center", gap: 5, flex: 1 }}>
                                            <Ionicons name="location" size={20} color="gray" />
                                            <TextInput placeholder='Add a Title' />
                                        </Pressable>
                                        <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                            <Ionicons name="attach" size={20} color="black" />
                                        </View>
                                        <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                            <Ionicons name="map" size={20} color="black" />
                                        </View>
                                    </View>
                                </View>
                            </ScrollView>
                        )}

                        {option == "Itinerary" && (
                            <ScrollView style={{ marginTop: 15, marginHorizontal: 5 }}>
                                <View style={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
                                    {route?.params?.item?.itinerary.map((item, index) => (
                                        <View key={index} style={{ padding: 10, borderRadius: 12, marginBottom: 7, backgroundColor: "orange", marginVertical: 10 }}>
                                            <Text style={{ fontSize: 15, fontWeight: "500", textAlign: "center", color: "white" }}>{formatDate(item?.date)}</Text>
                                        </View>
                                    ))}
                                </View>
                                <View>
                                    {route?.params?.item?.itinerary?.map((item, index) => (
                                        <View key={index} style={{ borderRadius: 8, marginBottom: 7, backgroundColor: "white", marginVertical: 10, padding: 15 }}>
                                            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                                                <Text style={{ fontSize: 27, fontWeight: "bold" }}>{formatDate(item?.date)}</Text>
                                                <Text style={{ fontSize: 14, fontWeight: "500", color: "gray" }}>Ad sub heading</Text>
                                            </View>
                                            <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center", gap: 10 }}>
                                                <Pressable style={{ padding: 10, borderRadius: 10, backgroundColor: "#F0F0F0", flexDirection: "row", alignItems: "center", gap: 5, flex: 1 }}>
                                                    <Ionicons name="location" size={20} color="gray" />
                                                    <TextInput placeholder='Add a Title' />
                                                </Pressable>
                                                <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                                    <Ionicons name="attach" size={20} color="black" />
                                                </View>
                                                <View style={{ width: 44, borderRadius: 17, height: 44, justifyContent: "center", alignItems: "center", backgroundColor: "#F0F0F0" }}>
                                                    <Ionicons name="map" size={20} color="black" />
                                                </View>
                                            </View>
                                        </View>
                                    ))}
                                </View>
                            </ScrollView>
                        )}

                        {option == "Explore" && (
                            <ScrollView style={{ marginTop: 15, borderRadius: 10, marginHorizontal: 12 }}>
                                <View style={{ padding: 10, backgroundColor: "#E0E0E0", flexDirection: "row", alignItems: "center", gap: 5 }}>
                                    <Ionicons name="search" size={25} color="gray" />
                                    <Text>{route?.params?.item?.tripName}</Text>
                                </View>
                                <View style={{ marginTop: 12 }}>
                                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
                                        <Text style={{ fontSize: 15, fontWeight: "bold" }}>Categories</Text>
                                        <Text style={{ fontSize: 15, fontWeight: "bold" }}>See all</Text>
                                    </View>
                                </View>
                                <View style={{ flexDirection: "row", alignItems: "center", gap: 10, marginTop: 15 }}>
                                    <View style={{ backgroundColor: "#E8E8E8", padding: 12, borderRadius: 7, flex: 1 }}>
                                        <Text style={{ fontSize: 15 }}>🍽️ Restaurants</Text>
                                    </View>
                                    <View style={{ backgroundColor: "#E8E8E8", padding: 12, borderRadius: 7, flex: 1 }}>
                                        <Text style={{ fontSize: 15 }}>☕ Cafes</Text>
                                    </View>
                                </View>
                                <View style={{ flexDirection: "row", alignItems: "center", gap: 10, marginTop: 15 }}>
                                    <View style={{ backgroundColor: "#E8E8E8", padding: 12, borderRadius: 7, flex: 1 }}>
                                        <Text style={{ fontSize: 15 }}>🤑 Cheap rates</Text>
                                    </View>
                                    <View style={{ backgroundColor: "#E8E8E8", padding: 12, borderRadius: 7, flex: 1 }}>
                                        <Text style={{ fontSize: 15 }}>✈️ Travel</Text>
                                    </View>
                                </View>
                                <View style={{ marginTop: 10 }}>
                                    <Text style={{ fontSize: 15, fontWeight: "bold" }}>Video Guides</Text>
                                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
                                        <View style={{ flex: 1 }}>
                                            <Image
                                                style={{ width: 160, height: 110, resizeMode: 'cover' }}
                                                source={{ uri: "https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Youtube2_colored_svg-128.png" }}
                                            />
                                        </View>
                                        <View style={{ flex: 1 }}>
                                            <Image
                                                style={{ width: 160, height: 110, resizeMode: 'cover' }}
                                                source={{ uri: "https://1000logos.net/wp-content/uploads/2017/02/Instagram-app-logo-768x581.jpg" }}
                                            />
                                        </View>
                                    </View>
                                </View>
                            </ScrollView>
                        )}
                    </View>
                </View>

                {/* Add Place Modal */}
                <Modal

isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
onBackButtonPress={() => setModalVisible(false)}
swipeDirection={["down", "up"]}
onSwipeComplete={() => setModalVisible(false)}
style={{ justifyContent: 'flex-end', margin: 0 }}

<View style={{ width: "100%", height: 600, backgroundColor: "#F8F8F8", borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 15 }}>
<Text style={{ textAlign: "center", fontWeight: "bold", marginBottom: 20 }}>Add a Place
<GooglePlacesAutocomplete
styles={placesInputStyle}
placeholder="Search places..."
minLength={2}
returnKeyType="search"
fetchDetails={true}
onPress={(data, details) => {
if (details) {
const placeId = details.place_id;
fetchPlaceDetails(placeId);
}
}}
query={{
key: "Paste your key here",
language: 'en',
type: 'establishment',
}}
enablePoweredByContainer={false}
debounce={300}
timeout={20000}
predefinedPlaces={[]}
textInputProps={{
onFocus: () => {},
onChangeText: (text) => console.log("Typing:", text),
}}
/>




</>
);
};

export default TripPlanScreen;

const styles = StyleSheet.create({});

@codermaen
Copy link

Faced the same issue. Adding predefinedPlaces={[]} prop fixed this issue but there is a new issue while rendering the results Exception in HostFunction: Expected argument 7 of method "sendRequest" to be a number, but got undefined

@OmarUsman777
Copy link

@codermaen any luck?

@codermaen
Copy link

@OmarUsman777 Not a proper fix. But from this solution #963 (comment), I moved out the library from node_modules and made the changes to GooglePlacesAutocomplete.js, and it is now working fine.

@sushant705
Copy link
Author

@OmarUsman777 Not a proper fix. But from this solution #963 (comment), I moved out the library from node_modules and made the changes to GooglePlacesAutocomplete.js, and it is now working fine.

For me what I have stated above worked for me , I was stuck here for 4-5 Days and then finally got the solution

@amitpdev
Copy link

@sushant705 that's very unfortunate, this repo has 131 open issues, no PR's are being merged. please consider switching to this new (and maintained!) autocomplete component

@OmarUsman777
Copy link

OmarUsman777 commented Apr 29, 2025 •
edited
Loading

@codermaen same, i ended up with same workaround, I've also got issue in renderRow component when i tried to give custom UI. Now i am handling it my own, removed the whole package.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@amitpdev @OmarUsman777 @brijeshbhikadiya @codermaen @sushant705