TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published


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


    See demo app here


    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


    yarn add rn-google-places-autocomplete


    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
        apiKey: apiKey,
        components: ['ng']
        width: '96%',
      tokenGenerator={tokenGen} // accepts token generator that return string | Promise<string>
      placeholder="Search place"
        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


    • 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'


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


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




    npm i rn-google-places-autocomplete

    DownloadsWeekly Downloads






    Unpacked Size

    334 kB

    Total Files


    Last publish


    • devrue