Bug Report

[sushant705]

//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

[brijeshbhikadiya]

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

[sushant705]

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]

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]

@codermaen any luck?

[codermaen]

@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]

@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]

@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]

@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.