Use MultiSearch Js API in a React Native application

Take benefit from MultiSearch Js API in a React Native application.

Import Multisearch JS library in React Component and Integrate it in the app
How-to use the Js library in a react native app
Working Sample

Import Multisearch JS library in React Component and Integrate it in the app

Multisearch React component is a wrapper around the javascript version of SDK. It has a dependency on react-native-webview. Please add webview dependency by installing it using npm i react-native-webview.

Add MultisearchView.tsx in your project (copy paste the code below) to start using the Multisearch library.

MultisearchView.tsx

        import * as React from "react";
import {useImperativeHandle} from "react";
import {WebView} from "react-native-webview";

export interface WoosData {
  api: string;
  description: string;
  id: string;
  item: Object;
  matched_substrings: null;
  types: [string];
}

export interface MultisearchViewProps {
  onAutocompleteMulti?(results: [Object], error?: any);

  onDetailsMulti?(results: Object, error?: any);

  config: JSON;
}

const MultisearchView = (props: MultisearchViewProps, ref) => {
  const webviewRef = React.useRef<WebView>(null);
  useImperativeHandle(ref, () => ({
    autocompleteMulti: (searchfor: string) => {
      if (searchfor === "") {
        props.onAutocompleteMulti(Object[0], null);
      } else {
        if (webviewRef) {
          const search_data = { action: "search", text: searchfor };
          webviewRef.current.postMessage(JSON.stringify(search_data));
        }
      }
    },
    detailsMulti: (api: string, id: string) => {
      if (webviewRef) {
        const search_data = { action: "detail", api: api, id: id };
        webviewRef.current.postMessage(JSON.stringify(search_data));
      }
    },
  }));
  React.useEffect(() => {
    return () => {
      console.log("Component dismiss: MultiSearchView");
    };
  }, []);
  function onMessage(data) {
    const communication = JSON.parse(data.nativeEvent.data);
    const results = communication["results"];
    const error = communication["error"];

    if (communication["api"] == "search") {
      if (props.onAutocompleteMulti) {
        props.onAutocompleteMulti(results, error);
      }
    } else if (communication["api"] == "detail") {
      if (props.onDetailsMulti) {
        props.onDetailsMulti(results, error);
      }
    }
  }

  const HTML = `
  <html>
  <body>
    <script type="text/javascript" src="https://sdk.woosmap.com/multisearch/multisearch.js"></script>
  <script>
      var multisearchObj = woosmap.multisearch(`${JSON.stringify(props.config)}`);
      let hook = navigator.appVersion.includes('Android') ? document: window;
      hook.addEventListener("message", message => {
        if(message.data){
          try {
            var action = JSON.parse(message.data);
            if(action["action"] == "search"){
                if(action["text"]){
                    var searchText = action["text"];
                    multisearchObj.autocompleteMulti(searchText, function (error, results) {
                        let output = {"api":"search","error":error,"results":results}
                        window.ReactNativeWebView.postMessage(JSON.stringify(output));
                    });
                }  
            }
            else if(action["action"] == "detail"){
                let api = action["api"];
                let id = action["id"];
                multisearchObj.detailsMulti({ id, api }, function (error, result) {
                  let output = {"api":"detail","error":error,"results":result}
                  window.ReactNativeWebView.postMessage(JSON.stringify(output));
                });
            }
          }
          catch(err) {
            console.log(err.message);
          }
        }
      });
    </script>
    <h1>hi</h1>
  </body>
  </html>`;
  const renderHtml = {html: HTML, baseUrl: "http://localhost"}
  return (<WebView ref={webviewRef}
                   originWhitelist={["*"]}
                   scalesPageToFit={false}
                   mixedContentMode="compatibility"
                   source={renderHtml}
                   onMessage={onMessage}
                   javaScriptEnabled={true}
                   domStorageEnabled={true}
                   startInLoadingState={true}
                   style={{height: 0}}/>
  );
};
export default React.forwardRef(MultisearchView);

How-to use the Js library in a react native app

The MultisearchView component exposes three props.

config: Parameter used to configure multi-search SDK. For more information, follow link
onAutocompleteMulti (Optional): function returning callback when any search result is available from SDK. This function has a signature as onAutocompleteMulti?(results: [Object], error?: any).
onDetailsMulti (Optional): function returning callback when asking for any particular places and results from SDK. This function has a signature as onDetailsMulti?(results: Object, error?: any).

Configure the Js library

First, the Woosmap MultiSearch Js library has to be configured and callbacks have to be defined:

        import MultisearchView from "./multisearch/MultisearchView";

let multisearchref = React.useRef(null);
let multisearchConfig: JSON = {
  debounceTime: 0,
  apiOrder: ["localities", "address", "places"],

  localities: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    params: {
      components: {country: ["FR", "GB"]},
      language: "en",
      types: ["locality", "country", "postal_code"]
    }
  },
  address: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    params: {
      components: {country: ["FR", "GB"]},
      language: "en",
        }
      },
      store: {
        key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
        params: {
          query: 'type:"bose_store"'
        }
      },
      places: {
        key: "{your_google_api_key}",
        params: {
          components: {country: ["FR", "GB"]}
        }
      }
    }

<MultisearchView
    ref={multisearchref}
    config={multisearchConfig} // share the json with all parameters here
    onAutocompleteMulti={onSearch} // autocomplete callback that provide you autocomplete suggestions
    onDetailsMulti={onDetail} // get detail callback that provide you additionnal details for a specific suggestion
/>

More information about the configuration of the library in the JavaScript API section

Retrieve suggestions

You can retrieve suggestions from the user input by calling the autocompleteMulti() method:

        multisearchref.current.autocompleteMulti(searchText);

A standardised JSON response is returned through the onAutocompleteMulti callback with all that’s needed to highlight what matches your users’ searches.

Get Details

Finally, to get the suggestion details when a user selects one from the pick list, call the details() method:

        multisearchref.current.detailsMulti(suggestion.api, suggestion.id);

This method is needed to retrieve accurate locations for every suggestion and pass structured address components, whatever the place your users looked for. A standardised JSON response is returned through the onDetailsMulti callback.

Working Sample

IntegrationMultiSearchSDK.tsx

        import * as React from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableHighlight,
  FlatList,
  TouchableOpacity,
  Alert,
  Platform,
} from "react-native";
import { LogBox } from "react-native";
import MultisearchView, {
  WoosData,
} from "./MultisearchView";

export default function IntegrationMultiSearchSDK() {
  const [searchText, setSearchText] = React.useState("");
  const [data, setData] = React.useState<WoosData | null>(null);
  let multiSearchref = React.useRef(null);
  React.useEffect(() => {
    LogBox.ignoreLogs(["VirtualizedLists should never be nested"]);
    return () => {
      console.log("Component dismiss: IntegrationWebview");
    };
  }, []);
  const onChangeSearchText = (value: string) => {
    setSearchText(value);
  };
  const onPress = () => {
    multiSearchref.current.autocompleteMulti(searchText);
  };
  const onClickList = (api, id) => {
    multiSearchref.current.detailsMulti(api, id);
  };
  const onSearch = (results, error) => {
    if (error) {
      console.error(error);
    }
    setData(results);
  };
  const onDetail = (results, error) => {
    if (error) {
      console.error(error);
    }
    Alert.alert("Details", JSON.stringify(results));
  };
const multisearchConfig:JSON = {
    debounceTime: 0,
    apiOrder: ["localities","address","places"],

    localities: {
        key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
        params: {
          components: {country: ["FR", "GB"]},
          language: "en",
          types: ["locality", "country", "postal_code"]
        }
      },
      address: {
        key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
        params: {
          components: {country: ["FR", "GB"]},
          language: "en",
        }
      },
      store: {
        key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
        params: {
          query: 'type:"bose_store"'
        }
      },
      places: {
        key: "{your_google_api_key}",
        params: {
          components: {country: ["FR", "GB"]}
        }
      }
    }
  return (
    <View style={pageStyles.main}>
      <View style={pageStyles.row}>
        <Text>Search</Text>
        <MultisearchView
          ref={multiSearchref}
          onAutocompleteMulti={onSearch}
          onDetailsMulti={onDetail}
          config={multisearchConfig}
        ></MultisearchView>
      </View>
      <View style={pageStyles.row}>
        <TextInput
          style={pageStyles.input}
          onChangeText={onChangeSearchText}
          value={searchText}
          placeholder="Text"
          keyboardType="default"
          autoCapitalize="none"
          autoComplete={Platform.OS === "web" ? "none" : "off"}
        />
        <TouchableHighlight
          activeOpacity={0.6}
          underlayColor="#DDDDDD"
          onPress={onPress}
        >
          <View style={pageStyles.button}>
            <Text style={pageStyles.text}>Search</Text>
          </View>
        </TouchableHighlight>
      </View>
      <View style={pageStyles.row}>
        <SearchList
          searchList={data}
          searchText={searchText}
          onDetail={onClickList}
        />
      </View>
      <View style={pageStyles.row}></View>
    </View>
  );
}

export function SearchList({ searchList, searchText, onDetail }) {
  const Item = ({ title }) => (
    <View style={pageStyles.item}>
      <Text style={pageStyles.searchtitle}>{title}</Text>
    </View>
  );

  const EmptyResult = () => (
    <View style={pageStyles.row}>
      {searchText ? (
        <Text style={pageStyles.resulttitle}>No result found.</Text>
      ) : (
        <Text style={pageStyles.resulttitle}>Search in above box.</Text>
      )}
    </View>
  );

  const SummaryResult = () => (
    <View style={pageStyles.row}>
      {searchList && searchList.length > 0 && (
        <View style={pageStyles.row}>
          <Text style={pageStyles.resulttitle}>
            Result found : {searchList.length}
          </Text>
        </View>
      )}
    </View>
  );
  function actionOnRow(item) {
    onDetail(item["api"], item["id"]);
  }

  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => actionOnRow(item)}>
      <View>
        <Item title={item.description} />
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={pageStyles.row}>
      <FlatList
        data={searchList}
        renderItem={renderItem}
        keyExtractor={(searchList) => searchList.id}
        ListEmptyComponent={EmptyResult}
        ListHeaderComponent={SummaryResult}
      />
    </View>
  );
}

const pageStyles = StyleSheet.create({
  main: {
    flex: 1,
    overflow: "scroll",
    minHeight: 100,
    marginVertical: 10,
    paddingLeft: 5,
    paddingRight: 5,
  },
  row: {
    paddingBottom: 5,
  },
  button: {
    alignItems: "center",
    backgroundColor: "blue",
    padding: 10,
    borderRadius: 10,
  },
  text: {
    alignItems: "center",
    color: "white",
    fontWeight: "bold",
  },
  input: {
    height: 40,
    margin: 0,
    marginBottom: 5,
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    backgroundColor: "white",
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 10,
    marginVertical: 2,
    marginHorizontal: 10,
  },
  searchtitle: {},
  resulttitle: {
    fontWeight: "bold",
  },
});

‹ Samples Get Started ›

Was this article helpful?

Have more questions? Submit a request