How to show a drop-down menu on press of a button(TouchableHighlight) in react native - react-native

Question

Picker(Native component of React-native) is different from drop-down menu, but I tried implementing it too , so please help me how to do that too .
press(){
return (
<Picker
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
);
}
tick(){
this.setState({picker: true});
}
var xyz= {this.state.picker} ? ({this.press}): (return(<View/>));
this is part of my render function , which contains an image button, by clicking that button I want to open a drop down menu .
<TouchableHighlight
underlayColor="gray"
onPress={this.tick}
style= {{flex:2,justifyContent:'center',alignItems:'center'}}>
<Image
style={{height:20,width:20,}}
source={require('./images/add-button.png')}/>
</TouchableHighlight>
{xyz}
I have set the default state of picker as false in Constructor.

Answer 1

Maybe react-native-dropdown is what you are looking for.
Usage:
var React = require('react-native');
var {
Component,
AppRegistry,
Text,
View,
} = React;
const DropDown = require('react-native-dropdown');
const {
Select,
Option,
OptionList,
updatePosition
} = DropDown;
class App extends Component {
constructor(props) {
super(props);
this.state = {
canada: ''
};
}
componentDidMount() {
updatePosition(this.refs['SELECT1']);
updatePosition(this.refs['OPTIONLIST']);
}
_getOptionList() {
return this.refs['OPTIONLIST'];
}
_canada(province) {
this.setState({
...this.state,
canada: province
});
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Select
width={250}
ref="SELECT1"
optionListRef={this._getOptionList.bind(this)}
defaultValue="Select a Province in Canada ..."
onSelect={this._canada.bind(this)}>
<Option>Java</Option>
<Option>Javascript</Option>
</Select>
<Text>Selected provicne of Canada: {this.state.canada}</Text>
<OptionList ref="OPTIONLIST"/>
</View>
);
}
}
AppRegistry.registerComponent('App', () => App);
Answers to questions:
refs is a way to reference the component you've added: More about refs
updatePosition accepts the reference and uses it to find where the dropdown should appear on the screen.