React Native Lookup Modal

React Native Lookup Modal

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: '[email protected]',
    country: 'Russia'
  },
  {
    id: 2,
    name: 'Alfonse Tesche',
    tel: '436-643-1234',
    email: '[email protected]',
    country: 'Indonesia'
  },
  {
    id: 3,
    name: 'Chandler Follett',
    tel: '682-740-8794',
    email: '[email protected]',
    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 |