Skip to content

chr314/react-native-lookup-modal

Repository files navigation

React Native Lookup Modal

React Native Lookup Modal

example gif

Install

yarn add react-native-lookup-modal

OR

npm install react-native-lookup-modal --save

Usage

import LookupModal from 'react-native-lookup-modal';

const users = [
  {
    id: 1,
    name: 'Brit Renfield',
    tel: '542-866-4301',
    email: 'brenfield0@gmail.com',
    country: 'Russia'
  },
  {
    id: 2,
    name: 'Alfonse Tesche',
    tel: '436-643-1234',
    email: 'atesche1@hotmail.com',
    country: 'Indonesia'
  },
  {
    id: 3,
    name: 'Chandler Follett',
    tel: '682-740-8794',
    email: 'cfollett2@boston.com',
    country: 'Greece'
  }
];

const [user, setUser] = useState();

<LookupModal
  data={users}
  value={user}
  onSelect={item => setUser(item)}
  displayKey={"name"}
/>

Props

Prop Description Type Required/Default
data Array of Objects array Default: []
value Selected item object Optional
onSelect Fired when an result is selected function (item) => {}
onCancel Fired when modal is closed without selecting any result function () => {}
displayKey Which property is shown in results string Default: title
selectText Text of select button string Default: Select...
placeholder Placeholder of TextInput string Default: Search...
searchFunc Custom search function function Default: defaultSearchFunc(text, data)
selectButtonStyle Custom select button style object Optional
selectButtonTextStyle Custom select button text style object Optional
hideSelectButton Hide select button bool Default: false
children Custom select button element Optional
contentStyle Custom modal content style object Optional
itemStyle Custom item style object Optional
itemTextStyle Custom item text style object Optional