React Native component for faster and simpler integration for Zir-AI in web development.

For full :page_facing_up: documentation, visit the online documentation.

The perfect starting point to integrate Zir-Ai Semantic search within your react-native project

:bulb: Getting Started

to install Zir-Ai react-native package for semantic search

npm install @zir-ai/searchbox-react-native

Then, import ZirSearchBox from @zir-ai/searchbox-react-native

import React, {useRef, useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import {ZirSearchBox} from '@zir-ai/searchbox-react-native';
const {width} = Dimensions.get('window');

export const App = () => {
  const handleSearchRef = useRef(null);
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  const tags = [
    'Is music haram?',
    'is alcohal allowed for muslims?',
    'is world round?',
    'can i stop my child from using internet?',
  ];

  const renderItem = ({item}) => {
    const backgroundColor = item.text === selectedId ? '#6e3b6e' : '#f9c2ff';
    const color = item.text === selectedId ? 'white' : 'black';

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.text)}
        backgroundColor={{backgroundColor}}
        textColor={{color}}
      />
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.zirBox}>
        <ZirSearchBox
          apikey="zqt_cKg6-joMkEsOa1EbNS-MQefDdC3I7Ct_g3tr2Q"
          customerID={1890073338}
          corpusID={[160, 148, 157]}
          query={query}
          setQuery={setQuery}
          resultsPerPage={15}
          setResults={setResults}
          focus={true}
          ref={handleSearchRef}
        />
        <View style={styles.tags}>
          {tags.map((t, i) => (
            <TouchableOpacity
              key={i}
              onPress={() => handleSearchRef.current.handleSearch(t)}>
              <Text style={styles.tag}>{t}</Text>
            </TouchableOpacity>
          ))}
        </View>
        <FlatList
          data={results?.response}
          renderItem={renderItem}
          keyExtractor={item => item.text}
          extraData={selectedId}
        />
      </View>
    </View>
  );
};

const Item = ({item, onPress, backgroundColor, textColor}) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
    <Text style={[StyleSheet.title, textColor]}>{item.text}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
  },
  zirBox: {
    marginTop: 10,
    padding: 10,
  },
  title: {
    fontSize: 32,
  },
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  zir__query_tags: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#5c7080',
    borderRadius: 3,
    color: '#f5f8fa',
    fontSize: 12,
    lineHeight: 16,
    maxWidth: 'max-content',
    minHeight: 20,
    position: 'relative',
    marginTop: 5,
  },
  tags: {
    marginHorizontal: 17,
    marginVertical: 10,
    display: 'flex',
    flexDirection: 'row',
    maxWidth: width,
    flexWrap: 'wrap',
  },
  tag: {
    backgroundColor: '#5c7080',
    borderRadius: 3,
    color: '#f5f8fa',
    fontSize: 12,
    lineHeight: 16,
    padding: 5,
    marginRight: 3,
    marginTop: 3,
  },
});

lets discuss the above:

apikey

apikey is your key which is linked with your single or multiple corpus. it's mandatory to pass apikey

customerID

it is your account ID which need to be passed to the component

corpusID

Basically it takes array of corpus id's which means on which corpus you want to make search

query

it is state to pass to the request

setQuery

it is state handler to set query on onChange event

setResults

it is state handler which will update result state with response of search query

Optional Parameters

resultsPerPage

By default results per page is 10, so which can be changed by passing props resultsPerPage

focus

By default its false, but if set true the search box will be focused on component mount

ref

Pass react useRef instance to ref props to control search from outside the native component like ref.current.handleSearch('query')

Custom Style

There are three optional props to change style

searchBoxStyle

it can change the style for the wrapper of the search box

searchFieldStyle

this props is used to change the style of the input field in the ZirSearchBox

logoStyle

it can be helpful to change the styling of the search box logo