Address Checker React Native Component

A React native Expo component that can be used to verify and check addresses.

Preview

To run an example project with this component, use:

yarn run example

Installation

npm install @address-checker/react-native-component

Initialization

To use the address checker component, you need to wrap your application with the AddressCheckerProvider component and pass the apiKey prop. Furthermore, you can also adjust the instance of address checker and styles:

type AddressCheckerContextType = {
  apiKey: string; // The API key to use for the address checker
  useL1L2FromServer?: boolean; // Whether to use the L1 and L2 fields from the server response or use the cached version (false by default)
  theme?: ThemeProps; // The theme to use for the address checker in a ThemeProps type
};

// The theme to use for the address checker
// Higher values indicate darker hues
type ThemeProps = {
  // Generally better to be use a dark color for the primary color (to indicate action or highlight)
  primary: {
    900: string;
    600: string;
  };
  // Generally better to be use a light color for the secondary color (to indicate background or light action)
  secondary: {
    500: string;
    400: string;
    200: string;
  };
};

// Example App init
const theme = {
  primary: {
    900: '#000000',
    600: '#14213D',
  },
  secondary: {
    500: '#E5E5E5',
    400: '#E8E8E8',
    200: '#FFFFFF',
  },
};

const App = () => {
  return (
    <AddressCheckerProvider value={{ apiKey: 'vera_...', theme, useL1L2FromServer: true }}>
      <RestOfTheApplication />
    </AddressCheckerProvider>
  );
}

Usage - Autocomplete

The Autocomplete component can be used to provide an autocomplete search bar for addresses.

• It uses debouncing of 500ms (by default, or other ms amount by providing a custom debounceTime as a prop) to prevent too many requests to the server.
• The onAddressSelected prop is called with an address (string) when an option is selected.
• The onNoResultsFound prop is called when no results are found or there is another error with the error as string.
• The styleContainer prop can be used to style the container of the autocomplete component.
• The selectedCountry prop is used to determine the country to search for addresses in. (only fully-supported counties are allowed)

import {
  AddressCheckerProvider,
  Autocomplete,
  CountryDropdown,
} from '@address-checker/react-native-component';
import { FullySupportedCountryCode, supportedCountries } from '@address-checker/api';

const App = () => {
  const [country, setCountry] = useState('default');

  return (
    <AddressCheckerProvider value={{ apiKey: '<YOUR-KEY>' }}>
      <View>
        <CountryDropdown
          selectedCountry={country}
          setSelectedCountry={setCountry}
        />
        {
          supportedCountries.includes(country as FullySupportedCountryCode)
            ? (<Autocomplete
              styleContainer={{ width: '100%', marginTop: 20 }}
              selectedCountry={selectedCountry}
              onAddressSelected={(address: string) => console.log('Address selected: ' + address)}
              onNoResultsFound={(error: string) => console.log(error)}
            />)
            : <Text>Country not supported</Text>
        }
      </View>
    </AddressCheckerProvider>
  );
}

export default App;

Usage - Required Fields Form

The RequiredFieldsForm component can be used to provide a form for users to fill in their address based on the country selected.

• The selectedCountry prop is used to determine the country to search for addresses in. (only fully-supported counties allow for search, partially supported countries return form schemas and format validation props, but cannot determine addresses)
• The onValidAddressSubmitted prop is called with an address (string) when the form is filled out correctly and an address is found.
• The onInvalidAddressSubmitted prop is called when the form is filled out incorrectly (no address is found).
• The styleContainer prop can be used to style the container of the form.

import {
  AddressCheckerProvider,
  CountryDropdown,
  RequiredFieldsForm,
} from '@address-checker/react-native-component';

const App = () => {
  const [country, setCountry] = useState('default');

  return (
    <AddressCheckerProvider value={{apiKey: '<YOUR-KEY>'}}>
      <View>
        <CountryDropdown
          selectedCountry={country}
          setSelectedCountry={setCountry}
        />
        <RequiredFieldsForm
          styleContainer={{width: '100%', marginTop: 20}}
          selectedCountry={selectedCountry}
          onValidAddressSubmitted={(address: string) => console.log('Address found: ' + address)}
          onInvalidAddressSubmitted={(_: { [key: string]: string }, error: string) => console.log(error)}
        />
      </View>
    </AddressCheckerProvider>
  );
}

export default App;

Advanced Usage

For a more concrete example of how to use the address checker component, please refer to the example project under the example/ directory.

Acknowledgements

Made with create-react-native-library