Bug Report

[TechnerHarpreetSingh]

I have used "onFail" method, but it's not giving me anything

After Pressing listItem from react-native-google-places-autocomplete I am getting this error.

Sometimes it works sometimes it crashes

I have also attached screen shots to show what my issue is.

import React, { useEffect, useRef, useState } from 'react'
import { ActivityIndicator, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import MapView, { Callout, Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import colors from '../theme/colors'
import { appConstants, extraConstants } from '../utils/constants';
import { SubmitButton } from './Button';
import { responsiveHeight, responsiveWidth } from '../utils/responsive_Dimensions';
import { NavigationHeader } from './Header';
import images from '../theme/images';
import { useDispatch, useSelector } from 'react-redux';
import { getGeoCodeAddress, getUserCurrentLocation } from '../utils/commonMethods';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { setUserLocation } from '../store/slice/userSlice';

const MapModal = ({ onExit, onSubmit }: any) => {
    const mapref = useRef<any>()
    const googleAutocompleteRef = useRef<any>()
    const userLocation: any = useSelector((state: any) => state?.userReducer.userLocation);
    const dispatch = useDispatch()
    const [pinLocation, setPinLocation] = useState({ latitude: 0, longitude: 0 })
    // const [pinGeoAddress, setPinGeoAddress] = useState('')
    const [fetchingCurrentLocation, setFetchingCurrentLocation] = useState(false)
    const [isFetchingAddress, setIsFetchingAddress] = useState(false)
    const [initialRegion, setInitialRegion] = useState({
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0.08,
        longitudeDelta: 0.08,
    })

    useEffect(() => {
        setPinLocation({ latitude: userLocation.lat, longitude: userLocation.lng })
        // setPinGeoAddress(userLocation.geoAddress)
        setInitialRegion((prevData: any) => { return { ...prevData, latitude: userLocation.lat, longitude: userLocation.lng } })
    }, [])
    const onDragEnd = async (event: any) => {

        let coordinates = event.nativeEvent.coordinate
        setPinLocation(coordinates)

    }
    const _onSubmit = async () => {
        let geoAddress: any = await getGeoCodeAddress({ lat: pinLocation.latitude, lng: pinLocation.longitude })
        dispatch(setUserLocation({
            lat: pinLocation.latitude,
            lng: pinLocation.longitude,
            geoAddress: geoAddress
        }))
        // setPinGeoAddress(geoAddress)
        setTimeout(() => {
            setIsFetchingAddress(false)
            onExit()
        }, 300);
    }
    const animateToRegion = (latitude: any, longitude: any) => {                     //! Animate map to region
        mapref?.current?.animateToRegion({ latitude, longitude, latitudeDelta: 0.08, longitudeDelta: 0.08 }, 3000)
    }


    const setCurrentLocation = () => {                                               //! Detect My Location
        setFetchingCurrentLocation(true)
        getUserCurrentLocation().then((myLocation: any) => { animateToRegion(myLocation?.lat, myLocation?.lng) }).finally(() => { setFetchingCurrentLocation(false) })
    }
    const GooglePlacesAutocompleteCrossButton = () => {
        return (
            <TouchableOpacity style={styles.googlePlacesAutocompleteCrossButton} onPress={() => {
                googleAutocompleteRef?.current?.setAddressText("")
                googleAutocompleteRef?.current?.clear()
                // googleAutocompleteRef?.current?.blur()
            }}>
                <Image source={images.close} style={styles.googlePlacesAutocompleteCrossIcon} />
            </TouchableOpacity>
        )
    }
    return (
        <Modal
            visible={true}
            animationType='slide'
            onRequestClose={onExit}>
            <View style={styles.container}>
                <View style={styles.googlePlacesAutocomplete}>
                    <GooglePlacesAutocomplete
                        placeholder={appConstants?.searchLocation}
                        ref={googleAutocompleteRef}
                        renderRightButton={() => <GooglePlacesAutocompleteCrossButton />}
                        fetchDetails={true}
                        onPress={(data, details: any = null) => {
                            let { lat, lng } = details?.geometry?.location
                            lat && lng && animateToRegion(lat, lng)
                        }}
                        onFail={(err) => { console.log("GooglePlacesAutocomplete - error -> ", err); }}
                        query={{ key: extraConstants.myApiKey, language: 'en', }}
                    />
                </View>
                <NavigationHeader
                    isFloating={true}
                    onBackPress={onExit}
                    title={appConstants.selectLocation}
                />
                {initialRegion.latitude != 0 && initialRegion.longitude != 0 && <MapView
                    style={styles.mapContainer}
                    ref={mapref}
                    onRegionChange={(coords) => {
                        googleAutocompleteRef?.current?.blur()
                        setPinLocation({ latitude: coords.latitude, longitude: coords.longitude })
                    }}
                    initialRegion={initialRegion}>
                    <Marker coordinate={pinLocation} draggable={true} onDragEnd={onDragEnd} pinColor='red' />
                </MapView>}
                <SubmitButton
                    isLoading={isFetchingAddress}
                    style={styles.submitButton}
                    activeOpacity={1}
                    title={appConstants.submit}
                    onPressIn={() => {
                        setIsFetchingAddress(true)
                    }}
                    onPress={onSubmit
                        ? async () => {
                            let geoAddress: any = await getGeoCodeAddress({ lat: pinLocation.latitude, lng: pinLocation.longitude })
                            // setPinGeoAddress(geoAddress)
                            onSubmit({
                                lat: pinLocation.latitude,
                                lng: pinLocation.longitude,
                                geoAddress: geoAddress
                            })
                            setTimeout(() => {
                                setIsFetchingAddress(false)
                            }, 300);
                        }
                        : _onSubmit}
                />
                <TouchableOpacity style={styles.myLocationBtn} activeOpacity={0.9} onPress={setCurrentLocation}>
                    {
                        fetchingCurrentLocation
                            ? (<ActivityIndicator style={styles.myLocationIcon} color={colors.mainTheme} />)
                            : (<Image source={images.myLocation} style={styles.myLocationIcon} />)
                    }
                </TouchableOpacity>
            </View>

        </Modal >
    )
}

export default MapModal
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    googlePlacesAutocompleteCrossButton: {
        padding: 3,
        backgroundColor: colors.white,
        position: "absolute",
        justifyContent: 'center',
        right: 3,
        height: "90%",
        width: 30,
        borderRadius: 5
    },
    googlePlacesAutocompleteCrossIcon: {
        height: 20,
        width: 20
    },
    googlePlacesAutocomplete: {
        position: 'absolute',
        width: responsiveWidth(96),
        alignSelf: "center",
        top: 70,
        zIndex: 100
    },
    myLocationBtn: {
        position: "absolute",
        bottom: 80,
        right: 10,
        backgroundColor: colors.white,
        padding: 15,
        borderRadius: 100,
        shadowColor: colors.black,
        shadowOffset: { width: 0, height: 3, },
        shadowOpacity: 0.27,
        shadowRadius: 4.65,
        borderWidth: 0.15,
        borderColor: colors.darkGrey,
        elevation: 5,
    },
    myLocationIcon: {
        height: 30,
        width: 30
    },
    mapContainer: {
        width: responsiveWidth(100),
        height: responsiveHeight(105)
    },
    textFieldContainer: {
        backgroundColor: colors.white,
        borderRadius: 500,
        marginHorizontal: 5,
    },
    inputField: {
        marginHorizontal: 15,
        marginTop: 10,
    },
    submitButton: {
        position: "absolute",
        bottom: 5,
        left: 5,
        right: 5,
    }

})

[TechnerHarpreetSingh]

Solved - #910 (comment)