RN: Replaced broken Picker by custom dropdown

ReactNativeClient/lib/components/Dropdown.js

@@ -0,0 +1,129 @@
+const React = require('react');
+const { TouchableOpacity, TouchableWithoutFeedback , Dimensions, Text, Modal, View } = require('react-native');
+const { ItemList } = require('lib/components/ItemList.js');
+
+class Dropdown extends React.Component {
+
+	constructor() {
+		super();
+
+		this.headerRef_ = null;
+	}
+
+	componentWillMount() {
+		this.setState({
+			headerSize: { x: 0, y: 0, width: 0, height: 0 },
+			listVisible: false,
+		});
+	}
+
+	componentDidMount() {
+		// https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element
+		setTimeout(() => {
+			this.headerRef_.measure((fx, fy, width, height, px, py) => {
+				this.setState({
+					headerSize: { x: px, y: py, width: width, height: height }
+				});
+			});
+		}, 100);
+	}
+
+	render() {
+		const items = this.props.items;
+		const itemHeight = 60;
+		const windowHeight = Dimensions.get('window').height - 50;
+
+		// Dimensions doesn't return quite the right dimensions so leave an extra gap to make
+		// sure nothing is off screen.
+		const listMaxHeight = windowHeight;
+		const listHeight = Math.min(items.length * itemHeight, listMaxHeight);  //Dimensions.get('window').height - this.state.headerSize.y - this.state.headerSize.height - 50;
+		const maxListTop = windowHeight - listHeight;
+		const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height);
+
+		const wrapperStyle = {
+			width: this.state.headerSize.width,
+			height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear)
+			marginTop: listTop,
+			marginLeft: this.state.headerSize.x,
+		};
+
+		const itemListStyle = Object.assign({}, this.props.itemListStyle ? this.props.itemListStyle : {}, {
+			borderWidth: 1,
+			borderColor: '#ccc',
+		});
+
+		const itemWrapperStyle = Object.assign({}, this.props.itemWrapperStyle ? this.props.itemWrapperStyle : {}, {
+			flex:1,
+			justifyContent: 'center',
+			height: itemHeight,
+			paddingLeft: 20,
+			paddingRight: 10,
+		});
+
+		const headerWrapperStyle = Object.assign({}, this.props.headerWrapperStyle ? this.props.headerWrapperStyle : {}, {
+			height: 35,
+			// borderWidth: 1,
+			// borderColor: '#ccc',
+			paddingLeft: 20,
+			paddingRight: 20,
+			flex: 1,
+			flexDirection: 'row',
+			alignItems: 'center',
+		});
+
+		const headerStyle = Object.assign({}, this.props.headerStyle ? this.props.headerStyle : {}, {
+			flex: 1,
+		});
+
+		const headerArrowStyle = Object.assign({}, this.props.headerStyle ? this.props.headerStyle : {}, {
+			flex: 0,
+		});
+
+		const itemStyle = Object.assign({}, this.props.itemStyle ? this.props.itemStyle : {}, {
+			
+		});
+
+		let headerLabel = '...';
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item.value === this.props.selectedValue) headerLabel = item.label;
+		}
+
+		const closeList = () => {
+			this.setState({ listVisible: false });
+		}
+
+		const itemRenderer= (item) => {
+			return (
+				<TouchableOpacity style={itemWrapperStyle} key={item.value} onPress={() => { closeList(); if (this.props.onValueChange) this.props.onValueChange(item.value); }}>
+					<Text ellipsizeMode="tail" numberOfLines={1} style={itemStyle} key={item.value}>{item.label}</Text>
+				</TouchableOpacity>
+			);
+		}
+
+		return (
+			<View style={{flex: 1, flexDirection: 'column' }}>
+				<TouchableOpacity style={headerWrapperStyle} ref={(ref) => this.headerRef_ = ref} onPress={() => { this.setState({ listVisible: true }) }}>
+					<Text ellipsizeMode="tail" numberOfLines={1} style={headerStyle}>{headerLabel}</Text>
+					<Text style={headerArrowStyle}>{'▼'}</Text>
+				</TouchableOpacity>
+				<Modal transparent={true} visible={this.state.listVisible} onRequestClose={() => { closeList(); }} >
+					<TouchableWithoutFeedback onPressOut={() => { closeList() }}>
+						<View style={{flex:1}}>
+							<View style={wrapperStyle}>
+								<ItemList
+									style={itemListStyle}
+									items={this.props.items}
+									itemHeight={itemHeight}
+									itemRenderer={(item) => { return itemRenderer(item) }}
+								/>
+							</View>
+						</View>
+					</TouchableWithoutFeedback>
+				</Modal>
+			</View>
+		);
+	}
+}
+
+module.exports = { Dropdown };