code

import React,{useEffect,useState} from 'react';
import {
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  Image,
  PermissionsAndroid,
  Platform,
  Button,
} from 'react-native';

//import all the components we are going to use.
import Geolocation from '@react-native-community/geolocation';

import LocationEnabler from "react-native-location-enabler";

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

import MapView from 'react-native-maps';
import { TextInput } from 'react-native-gesture-handler';



import axios from 'axios';

const PagesMaps = () => {

  // setting allow maps location
  const {
    PRIORITIES: { HIGH_ACCURACY },
    useLocationSettings,
  } = LocationEnabler;

  const [nama, setnama] = useState("paris");

  useEffect(() => {
    // getdata();
    return () => {
      
    }
  }, [nama])

  const [enabled, requestResolution] = useLocationSettings({
    priority: HIGH_ACCURACY,
    alwaysShow: true,
    needBle: true,
  });
  // end setting allow location maps

  const getdata= async()=>{
    var config = {
      method: 'get',
      url: `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${nama}&types=geocode&key=xx`,
      headers: { }
    };
    
    axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });
  }


  return (
    <View style={{
      flex:1,
      backgroundColor:"blue"
    }}>

         <GooglePlacesAutocomplete
            // enablePoweredByContainer={true}
            // filterReverseGeocodingByTypes	={["route"]}
              placeholder='Search'
              minLength={2}
              autoFocus={false}
              fetchDetails
              listViewDisplayed='auto'
              currentLocation={false}
              query={{
                  key: 'xxx-xxx',
                language: 'en',
                  types:  ["locality", "political", "geocode"],
              }}
              currentLocation={false}
              onPress={(data, details = null) => {
                  console.log(JSON.stringify(details));
                  // console.log(JSON.stringify(data));
              //   const region = {
              //     latitude: details.geometry.location.lat,
              //     longitude: details.geometry.location.lng,
              //     latitudeDelta: 0.00922 * 1.5,
              //     longitudeDelta: 0.00421 * 1.5
              //   };
              //   this.onRegionChange(region, region.latitude, region.longitude);
              }}

              styles={{
                textInputContainer: {
                  backgroundColor: 'grey',
                },
                textInput: {
                  height: 38,
                  color: '#5d5d5d',
                  fontSize: 16,
                },
                predefinedPlacesDescription: {
                  color: '#1faadb',
                },
              }}
            
              />


      <MapView
          style={{
              // flex:1
              height:"80%"
          }}
          initialRegion={{
              latitude: -6.4271966,
              longitude: 106.8548976,
              latitudeDelta: 0.009,
              longitudeDelta: 0.009,
          }}>
        
        <MapView.Marker
          coordinate={{
            latitude: -6.4271966,
            longitude: 106.8548976,
          }}
          title="Bandung"
          description="Bandung, Bandung City, West Java, Indonesia"
        />
        </MapView> 
        {/* {enabled==true?null:requestResolution()} */}
    </View>
  );
};

const colors = {
  red: '#b90707',
  green: '#03b503',
  blue: '#0000f7',
};

const styles = StyleSheet.create({
  container: {
    // alignItems: 'center',
    flex: 1,
    // justifyContent: 'center',
  },
  disabled: {
    color: colors.red,
  },
  enabled: {
    color: colors.green,
  },
  status: {
    fontSize: 20,
    margin: 20,
  },
  undefined: {
    color: colors.blue,
  },

  boldText: {
    fontSize: 25,
    color: 'red',
    marginVertical: 16,
  },
});

export default PagesMaps;