{"_id":"@animusicmoe/react-native-autocomplete-input","_rev":"1-1cacef9189bc57323108eb9d07ebc31f","name":"@animusicmoe/react-native-autocomplete-input","dist-tags":{"latest":"4.2.0-rc.2"},"versions":{"4.2.0-rc.2":{"name":"@animusicmoe/react-native-autocomplete-input","version":"4.2.0-rc.2","description":"Pure javascript autocomplete input for react-native","main":"index.js","scripts":{"test":"npm run lint && npm run testonly","lint":"eslint ./*.js ./example/*.js ./__tests__/*.js","testonly":"jest"},"repository":{"type":"git","url":"git+ssh://git@github.com/animuisic/react-native-autocomplete-input.git"},"keywords":["react-native","iOS","input","Android","autocomplete"],"author":{"name":"Laurence Bortfeld"},"license":"MIT","bugs":{"url":"https://github.com/l-urence/react-native-autocomplete-input/issues"},"homepage":"https://github.com/l-urence/react-native-autocomplete-input#readme","devDependencies":{"@babel/core":"^7.5.5","@babel/runtime":"^7.5.5","@react-native-community/eslint-config":"^0.0.5","babel-jest":"^24.8.0","eslint":"^6.3.0","eslint-config-airbnb":"^17.1.1","eslint-plugin-import":"^2.18.2","eslint-plugin-jest":"^22.13.6","eslint-plugin-jsx-a11y":"^6.2.3","jest":"^24.8.0","metro-react-native-babel-preset":"^0.55.0","react":"^16.8.6","react-native":"^0.60.4","react-test-renderer":"16.8.6"},"jest":{"preset":"react-native"},"gitHead":"1d614a8ca423a902083041a7b87c2e61d74cfffb","_id":"@animusicmoe/react-native-autocomplete-input@4.2.0-rc.2","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-F11BcJfQtojo5MTu3Talbt/IdZmKkohtiEpyp4QFC0eLm/ltmHvtYJZ4rco/xTaMSREl5DnRcAvxoorHgK7QCA==","shasum":"118f77f01e7129678e62b623a22d63c13e50bf6a","tarball":"https://registry.npmjs.org/@animusicmoe/react-native-autocomplete-input/-/react-native-autocomplete-input-4.2.0-rc.2.tgz","fileCount":4,"unpackedSize":13302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEV6TCRA9TVsSAnZWagAA13gP/Ayy5j08GGRRUkLjstpD\n/3eCWLbsIq4fyzOhxdlGnI5nWxyaqowYnAPSjT+FXhP/LJa8w1XFC9hwUIvA\nulzS6+0CnpKmf9djfsmmFlGu3cPECCb+kmBYKFnbLmmZCGgLD2h1wppGUZ4V\nEegyiIAswA+7HcNo18/uLLrvMANmF6gYSWsLQRg7ldRumqjom3067H5SESPh\n+I7Ezuh0+2PFl0KeiKgVTUk9uPZpCVONSMxLPCwgxEoRSSv09nLt9Ljqq8ZL\nnCD5HP1AtezeinLV4AHEjCBkEZuQoy1+eLDnKJhVrmhjdqvV7NQPKBTaAA8z\nwUYsbgXj6YaX46h0UL/Y/BjkphS4FbMudZRCr3XfaC6jqdkEjIJc0/1ZoDrc\nFDQxUKpTgMjDMfzstGh+TtKyQ2GX9MvGp7ux2IuargA6oaNJ2JGntdTZX3zX\ntECoJCuu0Tz+wZt8OXw4c6CU+efUkUWfCHAk819hJlgCaK7WKhtODsp5wbIt\n91befc9eboDE6TAy4R3+cS+yvPqAGHwP5Upql+Mxd8HCuyjSin/N4T+pLrhh\nAnJeT5YLdAV1J0BCqMTH0YQ6TuetICIRyLEPgiXaVfxFo6gn3nItk4AbGePH\nABWEStsDPdnxN5ZfMAFT/N+lRi9Q7C4PApCpbZvM80liPL0bjDC5/SqKPanA\neOEr\r\n=u8vP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGM2ausfNyF0afx3YC1GvHLbDJLjOsY1aCWYGHdDUfuAIgKZ8KMy31Xj84aG/XKnQkyvv5ha7ieDwcgbesIatfUFw="}]},"_npmUser":{"name":"animusic","email":"admin@animusic.moe"},"directories":{},"maintainers":[{"name":"animusic","email":"admin@animusic.moe"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-autocomplete-input_4.2.0-rc.2_1611751059174_0.28508781720394194"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-27T12:37:38.928Z","4.2.0-rc.2":"2021-01-27T12:37:39.336Z","modified":"2022-04-04T14:12:27.690Z"},"maintainers":[{"name":"animusic","email":"admin@animusic.moe"}],"description":"Pure javascript autocomplete input for react-native","homepage":"https://github.com/l-urence/react-native-autocomplete-input#readme","keywords":["react-native","iOS","input","Android","autocomplete"],"repository":{"type":"git","url":"git+ssh://git@github.com/animuisic/react-native-autocomplete-input.git"},"author":{"name":"Laurence Bortfeld"},"bugs":{"url":"https://github.com/l-urence/react-native-autocomplete-input/issues"},"license":"MIT","readme":"# react-native-autocomplete-input\r\n[![npm version](https://badge.fury.io/js/react-native-autocomplete-input.svg)](https://badge.fury.io/js/react-native-autocomplete-input)\r\n[![Build Status](https://travis-ci.org/mrlaessig/react-native-autocomplete-input.svg)](https://travis-ci.org/mrlaessig/react-native-autocomplete-input)\r\n\r\nA pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to build your own autocomplete.\r\n\r\n![Autocomplete Example](https://raw.githubusercontent.com/mrlaessig/react-native-autocomplete-input/master/example.gif)\r\n\r\n## How to use react-native-autocomplete-input\r\nTested with RN >= 0.26.2. If you want to use RN < 0.26 try to install react-native-autocomplete-input <= 0.0.5.\r\n\r\n### Installation\r\n\r\n```shell\r\n$ npm install --save react-native-autocomplete-input\r\n```\r\n\r\nor install HEAD from github.com:\r\n\r\n```shell\r\n$ npm install --save mrlaessig/react-native-autocomplete-input\r\n```\r\n\r\n### Example\r\n\r\n```javascript\r\n// ...\r\n\r\nrender() {\r\n  const { query } = this.state;\r\n  const data = this._filterData(query);\r\n  return (\r\n    <Autocomplete\r\n      data={data}\r\n      defaultValue={query}\r\n      onChangeText={text => this.setState({ query: text })}\r\n      renderItem={({ item, i }) => (\r\n        <TouchableOpacity onPress={() => this.setState({ query: item })}>\r\n          <Text>{item}</Text>\r\n        </TouchableOpacity>\r\n      )}\r\n    />\r\n  );\r\n}\r\n\r\n// ...\r\n```\r\n\r\nA complete example for Android and iOS can be found [here](//github.com/mrlaessig/react-native-autocomplete-input/blob/master/example/).\r\n\r\n### Android\r\nAndroid does not support overflows ([#20](https://github.com/mrlaessig/react-native-autocomplete-input/issues/20)), for that reason it is necessary to wrap the autocomplete into a *absolute* positioned view on Android. This will  allow the suggestion list to overlap other views inside your component.\r\n\r\n```javascript\r\n//...\r\n\r\nrender() {\r\n  return(\r\n    <View>\r\n      <View style={styles.autocompleteContainer}>\r\n        <Autocomplete {/* your props */} />\r\n      </View>\r\n      <View>\r\n        <Text>Some content</Text>\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\n//...\r\n\r\nconst styles = StyleSheet.create({\r\n  autocompleteContainer: {\r\n    flex: 1,\r\n    left: 0,\r\n    position: 'absolute',\r\n    right: 0,\r\n    top: 0,\r\n    zIndex: 1\r\n  }\r\n});\r\n\r\n```\r\n\r\n### Props\r\n| Prop | Type | Description |\r\n| :------------ |:---------------:| :-----|\r\n| containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. |\r\n| hideResults | bool | Set to `true` to hide the suggestion list.\r\n| data | array | An array with suggestion items to be rendered in `renderItem({ item, i })`. Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. |\r\n| inputContainerStyle | style | These styles will be applied to the container which surrounds the textInput component. |\r\n| listContainerStyle | style | These styles will be applied to the container which surrounds the result list. |\r\n| listStyle | style | These style will be applied to the result list. |\r\n| onShowResult | function | `onShowResult` will be called when the autocomplete suggestions appear or disappear. |\r\n| onStartShouldSetResponderCapture | function | `onStartShouldSetResponderCapture` will be passed to the result list view container ([onStartShouldSetResponderCapture](https://facebook.github.io/react-native/docs/gesture-responder-system.html#capture-shouldset-handlers)). |\r\n| renderItem | function | `renderItem` will be called to render the data objects which will be displayed in the result view below the text input. |\r\n| keyExtractor | function | `keyExtractor(item, i)` will be called to get key for each item. It's up to you which string to return as a key. |\r\n| renderSeparator | function | `renderSeparator` will be called to render the list separators which will be displayed between the list elements in the result view below the text input. |\r\n| renderTextInput | function | render custom TextInput. All props passed to this function. |\r\n| flatListProps | object | custom props to FlatList[](https://facebook.github.io/react-native/docs/flatlist.html)]. |\r\n\r\n## Known issues\r\n* By default the autocomplete will not behave as expected inside a `<ScrollView />`. Set the scroll view's prop to fix this: `keyboardShouldPersistTaps={true}` for RN <= 0.39, or `keyboardShouldPersistTaps='always'` for RN >= 0.40. ([#5](https://github.com/mrlaessig/react-native-autocomplete-input/issues/5)).\r\n* If you want to test with Jest add ```jest.mock('react-native-autocomplete-input', () => 'Autocomplete');``` to your test.\r\n\r\n## Contribute\r\nFeel free to open issues or do a PR!\r\n","readmeFilename":"README.md"}