├── package.json
├── LICENSE
├── README.md
└── ListViewSelect.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-list-view-select",
 3 |   "version": "1.0.4",
 4 |   "description": "React Native component to render a list view as a selectable list",
 5 |   "main": "ListViewSelect.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/JamesWatling/react-native-list-view-select.git"
 9 |   },
10 |   "keywords": [
11 |     "list",
12 |     "list View",
13 |     "selectable",
14 |     "select",
15 |     "dropdown",
16 |     "react-component",
17 |     "react-native",
18 |     "ios",
19 |     "android",
20 |     "modal"
21 |   ],
22 |   "author": "James Watling <watling.james@gmail.com> @jameswatling",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/JamesWatling/react-native-list-view-select/issues"
26 |   },
27 |   "dependencies": {
28 |     "prop-types": "^15.6.0"
29 |   },
30 |   "homepage": "https://github.com/JamesWatling/react-native-list-view-select"
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 James Watling
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React-Native List View Select
 2 | 
 3 | ## Installation instructions
 4 | 
 5 | `npm install --save react-native-list-view-select`
 6 | 
 7 | This 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+
 8 | 
 9 | List View Select is a designed to behave like a traditional `<select>` element in traditional HTML but with native components.
10 | 
11 | The <ListViewSelect/> 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.
12 | 
13 | The properties that this component accepts are
14 | * `list` Array of possible options
15 | * `isVisible` boolean to decide to show the Dropdown list or not
16 | * `onClick` callback function that takes an `item` parameter to handle the click operation
17 | * `onClose` callback function to set the isVisible to false to close the popover
18 | 
19 | 
20 | ## Screenshots
21 | Here is the List View Select used in the real world for an application I built 
22 | 
23 | ![](http://i.imgur.com/76iFV7n.gif)
24 | 
25 | Here is a quick gif of it in use, excuse the resolution
26 | ![](http://i.imgur.com/yzgYcNG.gif)
27 | # Before
28 | ![](http://i.imgur.com/qK359Tm.png)
29 | # Selection
30 | ![](http://i.imgur.com/niPxpss.png)
31 | # After Selection
32 | ![](http://i.imgur.com/PVtsExi.png)
33 | 
34 | 
35 | # Usage
36 | 
37 | ```js
38 | import React, { Component } from 'react';
39 | import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
40 | import ListViewSelect from 'react-native-list-view-select';
41 | import _ from 'lodash';
42 | 
43 | export default class ListViewSelectExample extends Component {
44 | 
45 |   constructor(props) {
46 |     super(props);
47 |     this.state = {
48 |       item: "Select Item",
49 |       isVisible: false,
50 |     };
51 |     _.bindAll(this, ['showPopover', 'closePopover', 'setItem']);
52 |   }
53 | 
54 |   showPopover() {
55 |     this.setState({isVisible: true});
56 |   }
57 | 
58 |   closePopover() {
59 |     this.setState({isVisible: false});
60 |   }
61 | 
62 |   setItem(item) {
63 |     this.setState({ item: item });
64 |   }
65 | 
66 |   render() {
67 |     const { selectedCity } = this.props;
68 |     const items = [
69 |       "Item 1",
70 |       "Item 2",
71 |       "Item 3",
72 |       "Item 4",
73 |     ];
74 | 
75 |     return (
76 |       <View style={styles.container}>
77 |         <TouchableHighlight onPress={this.showPopover}>
78 |           <Text>{this.state.item}</Text>
79 |         </TouchableHighlight>
80 |         <ListViewSelect
81 |           list={items}
82 |           isVisible={this.state.isVisible}
83 |           onClick={this.setItem}
84 |           onClose={this.closePopover}
85 |         />
86 |       </View>
87 |     );
88 |   }
89 | }
90 | 
91 | const styles = StyleSheet.create({
92 |   container: {
93 |     paddingTop: 100,
94 |     paddingBottom: 100,
95 |   },
96 | });
97 | ```
98 | 


--------------------------------------------------------------------------------
/ListViewSelect.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import {
  3 |   ListView,
  4 |   StyleSheet,
  5 |   Text,
  6 |   Dimensions,
  7 |   TouchableOpacity,
  8 |   View,
  9 | } from 'react-native';
 10 | import PropTypes from 'prop-types';
 11 | 
 12 | const SCREEN_HEIGHT = Dimensions.get('window').height;
 13 | const noop = () => {};
 14 | const ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => (r1 !== r2) });
 15 | 
 16 | export default class ListViewSelect extends Component {
 17 | 
 18 |   static propTypes: {
 19 |     list: PropTypes.array.isRequired,
 20 |     isVisible: PropTypes.bool,
 21 |     onClick: PropTypes.func,
 22 |     onClose: PropTypes.func,
 23 |   }
 24 | 
 25 |   static defaultProps: {
 26 |     list: [''],
 27 |     isVisible: false,
 28 |     onClick: noop,
 29 |     onClose: noop,
 30 |   }
 31 | 
 32 |   constructor(props) {
 33 |     super(props);
 34 |     this.state = {
 35 |       dataSource: ds.cloneWithRows(this.props.list),
 36 |     };
 37 |   }
 38 | 
 39 |   componentWillReceiveProps(nextProps:any) {
 40 |     if (nextProps.list !== this.props.list) {
 41 |       this.setState({ dataSource: ds.cloneWithRows(nextProps.list) });
 42 |     }
 43 |   }
 44 | 
 45 |   handleClick(data) {
 46 |     this.props.onClick(data);
 47 |     this.props.onClose();
 48 |   }
 49 | 
 50 |   renderSeparator(data) {
 51 |     const separatorStyle = this.props.separatorStyle || DefaultStyles.separator;
 52 | 
 53 |     if (data === this.props.list[0]) {
 54 |       return null;
 55 |     }
 56 |     return <View style={separatorStyle} />;
 57 |   }
 58 | 
 59 |   renderRow(rowData) {
 60 |     const rowTextStyle = this.props.rowText || DefaultStyles.rowText;
 61 | 
 62 |     let row = <Text style={rowTextStyle}>{rowData}</Text>;
 63 |     if (this.props.renderRow) {
 64 |       row = this.props.renderRow(rowData);
 65 |     }
 66 | 
 67 |     return (
 68 |       <View>
 69 |         {this.renderSeparator(rowData)}
 70 |         <TouchableOpacity onPress={() => this.handleClick(rowData)}>
 71 |           {row}
 72 |         </TouchableOpacity>
 73 |       </View>
 74 |     );
 75 |   }
 76 | 
 77 |   renderList() {
 78 |     let maxHeight = { height: this.props.listHeight };
 79 |     if (this.props.list.length > 12 && !this.props.height) {
 80 |       maxHeight = { height: SCREEN_HEIGHT * 3 / 4 };
 81 |     }
 82 | 
 83 |     return (
 84 |       <ListView
 85 |         style={maxHeight}
 86 |         dataSource={this.state.dataSource}
 87 |         renderRow={(rowData) => this.renderRow(rowData)}
 88 |         automaticallyAdjustContentInsets={false}
 89 |       />
 90 |     );
 91 |   }
 92 | 
 93 |   render() {
 94 |     const containerStyle = this.props.containerStyle || DefaultStyles.container;
 95 |     const popoverStyle = this.props.popoverStyle || DefaultStyles.popover;
 96 | 
 97 |     if (this.props.isVisible) {
 98 |       return (
 99 |         <TouchableOpacity onPress={this.props.onClose}>
100 |           <View style={containerStyle}>
101 |             <View style={popoverStyle}>
102 |               {this.renderList()}
103 |             </View>
104 |           </View>
105 |         </TouchableOpacity>
106 |       );
107 |     }
108 |     return <View />;
109 |   }
110 | };
111 | 
112 | const DefaultStyles = StyleSheet.create({
113 |   container: {
114 |     top: 0,
115 |     bottom: 0,
116 |     left: 0,
117 |     right: 0,
118 |     position: 'absolute',
119 |     justifyContent: 'center',
120 |     backgroundColor: 'transparent',
121 |   },
122 |   popover: {
123 |     margin: 10,
124 |     borderRadius: 3,
125 |     padding: 3,
126 |     backgroundColor: '#ffffff',
127 |   },
128 |   rowText: {
129 |     padding: 10,
130 |   },
131 |   separator: {
132 |     height: 0.5,
133 |     marginHorizontal: 8,
134 |     backgroundColor: '#CCC',
135 |   },
136 | });
137 | 


--------------------------------------------------------------------------------