rn-autocomplete-search

Search component with autocomplete feature.

This search component tries to simulate behavior of web search component.

Installation

npm install rn-autocomplete-search

Important

Only for android.

You always can try on iOS

Demo

Usage

import React from "react";
import {
  SafeAreaView,
  ScrollView,
  StyleSheet
} from "react-native";
import {RNAutocompleteSearch} from "rn-autocomplete-search";
import type {Data} from "./common/Common";

const data: Data[] = [
  {id: '1', text: 'Lorem Ipsum'},
  {id: '2', text: 'Random Text'}
]

const App = () => {
  return (
    <SafeAreaView style={styles.safeAreaWrapper}>
      <RNAutocompleteSearch
        data={data}
        textInputPlaceholder={'Search'}
        noResultInfo={"No result"}
      />
      <ScrollView showsVerticalScrollIndicator={false} style={{display: "flex"}}/>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeAreaWrapper: {
    flex: 1,
    paddingTop: 10,
    paddingBottom: 0,
    display: 'flex',
    backgroundColor: '#ffffff'
  },
});

export default App;

Required packages

Latest react-native-vector-icons

Params

Parameter	Required	Value	Description
data	True	Data[]	Data that will be shown in dropdown of autocomplete. type Data = { id: string, text: string }
textInputPlaceholder	True	string	Place holder in search part.
noResultInfo	True	string	Place holder in case of no results found.
onSelectRecommendation	False	(item: Data) => void	Callback that is called when you select item from recommendation modal. Item is one record from required data.
returnKeyType	False	ReturnKeyTypeOptions	ReturnKeyTypeOptions for TextInput.
onSubmitTextInput	False	(searchQuery: string) => void	Callback that is called when the text input submit button is pressed. searchQuery: string - text from input
showLeftIcons	False	boolean	Show left icons.
showRightIcons	False	boolean	Show right icons.
leftIconSize	False	number	Left icon size.
rightIconSize	False	number	Right icon size.
leftIcon	False	string	Name of react-native-vector-icon from MaterialCommunityIcons. This icon will be shown before focus on input, on left side.
leftIconAfterPress	False	string	Name of react-native-vector-icon from MaterialCommunityIcons. This icon will be shown after focus on input, on left side.
rightIcon	False	string	Name of react-native-vector-icon from MaterialCommunityIcons. This icon will be shown before focus on input, on right side.
rightIconAfterPress	False	string	Name of react-native-vector-icon from MaterialCommunityIcons. This icon will be shown before focus on input, on right side.
leftIconColor	False	string	Left icons color in hexadecimal format.
rightIconColor	False	string	Right icons color in hexadecimal format.
onLeftIconPress	False	() => void	Callback that is called when left icon is pressed.
onLeftFocusIconPress	False	() => void	When in focus, different left icon will be shown. Callback that is called when left icon (when in focus) is pressed.
onRightIconPress	False	() => void	Callback that is called when right icon is pressed.
onRightFocusIconPress	False	() => void	When in focus, different right icon will be shown. Callback that is called when right icon (when in focus) is pressed.
LeftIcon	False	() => ReactElement	Custom left icon. If you want to use your custom icon, you pass it here.
LeftIconAfterPress	False	() => ReactElement	Custom left icon when in focus (after press). If you want to use your custom icon, you pass it here.
RightIcon	False	() => ReactElement	Custom right icon. If you want to use your custom icon, you pass it here.
RightIconAfterPress	False	() => ReactElement	Custom right icon when in focus (after press). If you want to use your custom icon, you pass it here.
onTextInputFocus	False	() => void	When you focus on input, passed callback is called.
onTextInputBlur	False	() => void	When you leave input focus, passed callback is called.
textInputPlaceholderColor	False	string	Text input placeholder color in hexadecimal format.
textInputColor	False	string	Text input color in hexadecimal format.
textInputStyle	False	StyleProp	Customize text input style.
searchBarStyle	False	StyleProp	Customize search bar style.
offsetRecommendation	False	number	When you start typing, recommendation modal will be shown. This number sets how much offset in vertical line will modal be separated from search bar.
recommendationStyle	False	StyleProp	Customize recommendation style modal.
recommendationItemStyle	False	StyleProp	Recommendation modal is contained by list of items. With this parameter you customize recommendation item style.
recommendationItemTextStyle	False	StyleProp	Recommendation modal is contained by list of items. With this parameter you customize recommendation item style.
RecommendationItem	False	({ item, searchQuery, onPress } : { item: Data, searchQuery: string, onPress: (item: Data) => void }) => ReactElement	You can customize your own recommendation item inside recommendation modal. item: Data - item (id: string, text: string) that will be rendered, or text that will be shown searchQuery: string - text from input onPress: (item: Data) => void - function that will be called when item is pressed
recommendationItemRippleColor	False	string	Recommendation item ripple color in hexadecimal format.
textBoldStyle	False	StyleProp	Customize bolded text in recommendation item.
textNormalStyle	False	StyleProp	Customize normal text in recommendation item.
recommendationSeparatorStyle	False	StyleProp	All recommendation items are separated with thin line. With this parameter you can custime recommendation itme separator.

Contributing

I welcome all recommendations and improvements.

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library