Mobile: Fixed dropdown positioning

This commit is contained in:
Laurent Cozic
2017-12-07 23:24:14 +00:00
parent 5c4a536dad
commit b929b46281
+9 -8
View File
@@ -17,15 +17,13 @@ class Dropdown extends React.Component {
}); });
} }
componentDidMount() { updateHeaderCoordinates() {
// https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element // https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element
setTimeout(() => { this.headerRef_.measure((fx, fy, width, height, px, py) => {
this.headerRef_.measure((fx, fy, width, height, px, py) => { this.setState({
this.setState({ headerSize: { x: px, y: py, width: width, height: height }
headerSize: { x: px, y: py, width: width, height: height }
});
}); });
}, 100); });
} }
render() { render() {
@@ -107,7 +105,10 @@ class Dropdown extends React.Component {
return ( return (
<View style={{flex: 1, flexDirection: 'column' }}> <View style={{flex: 1, flexDirection: 'column' }}>
<TouchableOpacity style={headerWrapperStyle} ref={(ref) => this.headerRef_ = ref} onPress={() => { this.setState({ listVisible: true }) }}> <TouchableOpacity style={headerWrapperStyle} ref={(ref) => this.headerRef_ = ref} onPress={() => {
this.updateHeaderCoordinates();
this.setState({ listVisible: true });
}}>
<Text ellipsizeMode="tail" numberOfLines={1} style={headerStyle}>{headerLabel}</Text> <Text ellipsizeMode="tail" numberOfLines={1} style={headerStyle}>{headerLabel}</Text>
<Text style={headerArrowStyle}>{'▼'}</Text> <Text style={headerArrowStyle}>{'▼'}</Text>
</TouchableOpacity> </TouchableOpacity>