How to show dropdown list when an image is clicked in react-native-modal-dropdown - react-native

Question

I want to implement react-native-modal-dropdown functionality in my app,
here is the code
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>{Strings.Location}</Text>
<View style={styles.input}>
<Image
style={styles.mapIcon}
source={require('../assets/map_pic_icon.png')}
/>
<ModalDropdown
onSelect={(index, value) => { this.setState({ selected: value }) }}
options={['option 1', 'option 2', 'option 3', 'option 4']}
defaultValue={Strings.Gaston}
dropdownTextStyle={{ backgroundColor: '#fff', fontSize: 18, color: colors.black }}/*Style here*/
textStyle={{ fontSize: 18, color: colors.gunmetal, alignSelf: 'flex-start', marginLeft: 10 }}
dropdownStyle={{ flex: 1, width: '90%', marginVertical: 10, borderWidth: 1, borderColor: colors.light_gray }}
style={{ flex: 1, width: '100%', backgroundColor: colors.white, justifyContent: 'center' }}
/>
<Image
style={styles.iconStyle}
source={require('../assets/down_arrow_blue.png')}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
viewStyle: {
margin: 10,
},
input: {
height: 50,
width: '100%',
marginTop: 8,
borderRadius: 2,
borderColor: colors.light_gray,
fontSize: 20,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
iconStyle: {
margin: 20,
alignSelf: 'flex-end'
},
mapIcon: {
margin: 10,
alignSelf: 'center',
},
});
using this code my screen looks like this
my problem is when i click on blue color down arrow image then drodown is not opening it is only opening when i click on text .
How to solve this
And one more issue is dropdown width is not aligning properly to parent.
It is coming like this
Can anyone please tell me how to show dropdown list when icon is clicked and how to align the drodownlist list width properly.