Mapbox Search Component for React Native

Customizable Mapbox Places autocomplete component for iOS and Android React-Native apps

Preview

Support

Buy me a coffe at:

BuyMeACoffee

Saweria

Installation

Step 1.

npm install react-native-mapbox-places-autocomplete --save

or

yarn add react-native-mapbox-places-autocomplete

Step 2.

Get your Mapbox Public Token

Basic Example

Basic Address Search

import React from "react";
import MapboxPlacesAutocomplete from "react-native-mapbox-places-autocomplete";
import Config from "react-native-config";

const MapboxPlacesInput = () => {
  return (
    <MapboxPlacesAutocomplete
      id="origin"
      placeholder="Origin"
      accessToken={Config.MAPBOX_PUBLIC_TOKEN} // MAPBOX_PUBLIC_TOKEN is stored in .env root project folder
      onPlaceSelect={(data) => {
        dispatch(setOrigin(data));
        dispatch(setDestination(null));
      }}
      onClearInput={({ id }) => {
        id === "origin" && dispatch(setOrigin(null));
      }}
      countryId="id"
      containerStyle={{
        marginBottom: 12,
      }}
    />
  );
};

export default MapboxPlacesInput;

Available Properties

Property name	Description
id	: string
inputStyle	: StyleProp<TextStyle>
containerStyle	: StyleProp<ViewStyle>
inputClassName	: string
containerClassName	: string
placeholder	: string
accessToken	: string
onPlaceSelect	: (data) => { /* do something with the data */ }
countryId	: string
onClearInput	: (data) => { /* do something with the data */ }

Changelog

Please see the releases tab for the changelog information.

License

MIT

Authors

• Cipto Hadi