{"id":13499706,"url":"https://github.com/JamesWatling/react-native-list-view-select","last_synced_at":"2025-03-29T05:32:09.537Z","repository":{"id":57338066,"uuid":"69316973","full_name":"JamesWatling/react-native-list-view-select","owner":"JamesWatling","description":"List View Select is a designed to behave like a traditional `\u003cselect\u003e` element in traditional HTML but with native components.","archived":false,"fork":false,"pushed_at":"2018-10-15T08:52:24.000Z","size":10,"stargazers_count":41,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-31T18:38:20.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JamesWatling.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-27T03:48:12.000Z","updated_at":"2021-07-13T10:11:26.000Z","dependencies_parsed_at":"2022-09-14T18:50:44.469Z","dependency_job_id":null,"html_url":"https://github.com/JamesWatling/react-native-list-view-select","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamesWatling%2Freact-native-list-view-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamesWatling%2Freact-native-list-view-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamesWatling%2Freact-native-list-view-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JamesWatling%2Freact-native-list-view-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JamesWatling","download_url":"https://codeload.github.com/JamesWatling/react-native-list-view-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246145012,"owners_count":20730494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T22:00:38.939Z","updated_at":"2025-03-29T05:32:09.190Z","avatar_url":"https://github.com/JamesWatling.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# React-Native List View Select\n\n## Installation instructions\n\n`npm install --save react-native-list-view-select`\n\nThis module started as a personal fork of React Native List Popover homepage: https://github.com/bulenttastan/react-native-list-popover I have converted it to ES6 syntax and added support for React Native 0.24+\n\nList View Select is a designed to behave like a traditional `\u003cselect\u003e` element in traditional HTML but with native components.\n\nThe \u003cListViewSelect/\u003e component allows you to add a very simple List view that is triggered over screen with a list of items as the child component and access the selected item from the parent component.\n\nThe properties that this component accepts are\n* `list` Array of possible options\n* `isVisible` boolean to decide to show the Dropdown list or not\n* `onClick` callback function that takes an `item` parameter to handle the click operation\n* `onClose` callback function to set the isVisible to false to close the popover\n\n\n## Screenshots\nHere is the List View Select used in the real world for an application I built \n\n![](http://i.imgur.com/76iFV7n.gif)\n\nHere is a quick gif of it in use, excuse the resolution\n![](http://i.imgur.com/yzgYcNG.gif)\n# Before\n![](http://i.imgur.com/qK359Tm.png)\n# Selection\n![](http://i.imgur.com/niPxpss.png)\n# After Selection\n![](http://i.imgur.com/PVtsExi.png)\n\n\n# Usage\n\n```js\nimport React, { Component } from 'react';\nimport { StyleSheet, View, Text, TouchableHighlight } from 'react-native';\nimport ListViewSelect from 'react-native-list-view-select';\nimport _ from 'lodash';\n\nexport default class ListViewSelectExample extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      item: \"Select Item\",\n      isVisible: false,\n    };\n    _.bindAll(this, ['showPopover', 'closePopover', 'setItem']);\n  }\n\n  showPopover() {\n    this.setState({isVisible: true});\n  }\n\n  closePopover() {\n    this.setState({isVisible: false});\n  }\n\n  setItem(item) {\n    this.setState({ item: item });\n  }\n\n  render() {\n    const { selectedCity } = this.props;\n    const items = [\n      \"Item 1\",\n      \"Item 2\",\n      \"Item 3\",\n      \"Item 4\",\n    ];\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTouchableHighlight onPress={this.showPopover}\u003e\n          \u003cText\u003e{this.state.item}\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n        \u003cListViewSelect\n          list={items}\n          isVisible={this.state.isVisible}\n          onClick={this.setItem}\n          onClose={this.closePopover}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    paddingTop: 100,\n    paddingBottom: 100,\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJamesWatling%2Freact-native-list-view-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJamesWatling%2Freact-native-list-view-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJamesWatling%2Freact-native-list-view-select/lists"}