How to Add Address Autocomplete in React Native (Google Places Example)

import React, { createRef, useEffect } from 'react';
import { DimensionValue, StyleSheet, TextInputProps, View } from 'react-native';
import {
  GooglePlaceData,
  GooglePlaceDetail,
  GooglePlacesAutocomplete,
  GooglePlacesAutocompleteRef,
} from 'react-native-google-places-autocomplete';
import { Colors } from '@/theme';
import { resolveFontFamily } from '@/theme/fonts';
import { Shadows } from '@/theme/shadows';
import { AppInputLabel } from '../text/AppInputLabel';
import { InputStyles } from '@/theme/InputStyles';
import { Address } from '@/model/address/types';
import { AppText } from '../text/AppText';

type OnPressHandler = (data: GooglePlaceData, detail: GooglePlaceDetail | null) => void;

export type WHTextInputProps = {
  labelFontColor?: string;
  label?: string;
  onAddressChange: (data: Partial<Address>) => void;
  placeholder?: string;
  onChangeText?: (v: string) => void;
  width?: DimensionValue | undefined;
};

const GOOGLE_PLACES_API_KEY = '';

export const googlePlacesInputRef = createRef<GooglePlacesAutocompleteRef>();

const GooglePlacesInput = (props: WHTextInputProps & TextInputProps) => {
  const {
    labelFontColor,
    label,
    value,
    onAddressChange,
    placeholder = '',
    onChangeText = () => {},
    width = '100%',
  } = props;

  useEffect(() => {
    value && googlePlacesInputRef.current?.setAddressText(value);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handlePress: OnPressHandler = (_, details) => {
    const route = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('street_number')
    )?.short_name;
    const streetNumber = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('route')
    )?.short_name;
    const streetOne = `${route ? route : ''} ${streetNumber}`;
    const postalCode = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('postal_code')
    )?.short_name;
    const city = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('locality')
    )?.long_name;
    const state = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('administrative_area_level_1')
    )?.short_name;
    const country = details?.address_components.find((addressComponent) =>
      addressComponent.types.includes('country')
    )?.short_name;
    const coordinates = details?.geometry.location as unknown as {
      lat: number;
      lng: number;
    };
    const data: Partial<Address> = {
      streetOne,
      postalCode,
      city,
      state,
      latitude: coordinates.lat,
      longitude: coordinates.lng,
      country,
    };
    onAddressChange(data);
  };

  return (
    <View style={{ width }}>
      {label && <AppInputLabel label={label} color={labelFontColor} />}
      <GooglePlacesAutocomplete
        ref={googlePlacesInputRef}
        placeholder={placeholder}
        fetchDetails
        enablePoweredByContainer
        onPress={handlePress}
        query={{
          key: GOOGLE_PLACES_API_KEY,
          language: 'en',
          types: 'address',
        }}
        textInputProps={{
          placeholderTextColor: Colors.Grey,
          returnKeyType: 'next',
          onChangeText,
        }}
        styles={{
          textInput: {
            ...InputStyles.primary,
            fontFamily: resolveFontFamily('400'),
          },
          container: styles.container,
          listView: styles.listView,
        }}
        disableScroll={true}
        renderRow={(rowData) => {
          const title = rowData.structured_formatting.main_text;
          const address = rowData.structured_formatting.secondary_text;
          return (
            <View>
              <AppText>{title}</AppText>
              <AppText>{address}</AppText>
            </View>
          );
        }}
      />
    </View>
  );
};

export default GooglePlacesInput;

const styles = StyleSheet.create({
  container: {},
  textInputContainer: {
    backgroundColor: '#ffffff',
    borderRadius: 10,
    justifyContent: 'flex-start',
    zIndex: 10,
    height: 50,
    alignItems: 'center',
    ...Shadows.xs,
  },
  listView: {
    borderRadius: 5,
    backgroundColor: Colors.White,
    borderWidth: 1,
    borderColor: Colors.LightGrey,
    ...Shadows.xs,
  },
  separator: {
    display: 'none',
  },
});