rn-google-places-autocomplete
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    rn-google-places-autocomplete

    Easy to use Google Places Autocomplete with in-built support for sessionToken generator.

    Screenshot

    See demo app here

    Installation

    Note: You must obtain an API Key for Places Autocomplete from your google developer console. This Module uses the HTTP Places Autocomplete web service .

    npm install rn-google-places-autocomplete

    or

    yarn add rn-google-places-autocomplete

    Usage

    import PlacesAutocomplete from 'rn-google-places-autocomplete';
    const apiKey = 'YOUR_API_KEY';
    
    // I recommend using `nanoid` for generating session tokens
    const tokenGen () => {
      return Math.random().toString(36).substr(1);
    }
    
    // built from the ground up to be easily customized
    // includes typings for all options
    
    <PlacesAutocomplete
      googleParameters={{
        apiKey: apiKey,
        components: ['ng']
      }}
      autocompleteContainer={{
        width: '96%',
      }}
      tokenGenerator={tokenGen} // accepts token generator that return string | Promise<string>
      placeholder="Search place"
      fetchActivity={true}
      predictionOptions={{
        icon: <Icon /> // any arbitrary react element,
        highlight: 'matched',
        style: {
          suggestedText: {
            color: '#5c6bc0'
          },
          highlightedText: {
            color: '#303f9f'
          }
        }
      }}
      onSelectAddress={(addr) => {
        // returns a prediction type
      }}
      onQueryError={(e) => {
        // do something with the return error
        // type spec below
      }}
      onFetching={(status) => {
        // true when fetch starts and false when fetch end
        // you can create a custom interaction by listing to this event
      }}
      onClearText={() => {
        // perform actions here when the address gets cleared using the "x" button
      }}
    />

    Features

    • Supports Session Tokens
    • Offers useful events that allows for more customizations
    • Easy to style and customize
    • Mirrors all parameter on the google documentation here, with typings

    Complete PlacesAutocomplete Options

      tokenGenerator: () => string | Promise<string> // inject a function that generates random string. Checkout nanoid
    
      placeholder: string // input place holder
    
      value: string // set initial Value
    
      autocompleteContainer: ViewStyle // style for the container that wraps everything
    
      inputContainerStyle: ViewStyle // style the view that wraps the TextInput
    
      inputStyle: TextStyle // style the input box
    
      fetchOffset: number // number of characters to enter before starting places search
    
      fetchActivity: boolean | JSX.Element // set to true to show the default fetch activity or passing in your own Element
    
      predictionOptions: {
        style?: suggestionsStyle, // style every component in the predictions list see styling for more information
        icon?: JSX.Element, // icon to display on the left in each prediction item
        highlight?: decorateTextFormat // matched | unmatched; specifies part of prediction result to highlight
      }
    
      googleParameters: GoogleParameters // all supported parameters from places autocomplete. see https://developers.google.com/places/web-service/autocomplete
    
      onSelectAddress: (address: prediction): void // Event | returns the selected prediction type
    
      onFetching: (status: boolean): void // Event | returns the selected prediction type
    
      onQueryError: (res: GoogleAutoCompleteResult) // Event | returns the Result from Google Places when status != 'OK'

    Stylings

      PlacesAutocomplete {
    
        autocompleteContainer: ViewStyle // root container
    
        inputContainerStyle: ViewStyle // input contain style
    
        inputStyle: TextStyle // input style
    
        predictionOptions: {
    
          style: suggestionStyle {
    
            container: ViewStyle // predictions container style
    
            itemContainer: ViewStyle // prediction lineItem style
    
            suggestedText: TextStyle // prediction text style
    
            highlightedText: TextStyle // styling for when highlight is set
    
          }
    
        }
    
      }

    Important types

      // see https://developers.google.com/places/web-service/autocomplete for more 
      // information on the type of values to pass here
      GoogleParameters {
        apiKey: string;
        offset?: number;
        origin?: latlng;
        location?: latlng;
        radius?: number;
        language?: supportedLanguages;
        types?: googlePlacesType,
        components?: Array<iso3166>;
        strictbounds?: boolean;
      }
    
      // see https://developers.google.com/places/web-service/autocomplete#place_autocomplete_responses
      // for more information on the type of response that'll be populated here
      GoogleAutocompleteResult{
        error_message: string;
        predictions: Array<prediction>;
        status: string;
      }
    
      // represents each item in the predictions fromplaces autocomplete
      prediction {
        description: string;
        distance_meters?: number;
        id: string;
        matched_substrings: Array<lengthAndOffset>;
        place_id: string;
        reference: string;
        structured_formatting?: structured_formatting;
        terms: Array<offsetAndValue>
        types: Array<string>
      }

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    License

    MIT

    Install

    npm i rn-google-places-autocomplete

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    334 kB

    Total Files

    25

    Last publish

    Collaborators

    • devrue