react-native-modal-dropdown
react-native-modal-dropdown copied to clipboard
Arrow at the end of the button
How do I make the arrow show up at the end of the dropdown list button? I want to make it clear that this component is a dropdownlist and in both the example and when I try it out myself there's no arrow at the end of the button so it kinda look just like any other text input field or text field
I'm not sure if there is a better way, but I did it by giving the <ModalDropdown>
a <View>
as a child.
<ModalDropdown options={options} onSelect={() => function()}>
<View style={styles.dropdown}>
<Text>Select</Text>
<Icon name={'expand-more'} iconStyle={{ marginRight: 5 }}/>
</View>
</ModalDropdown>
Of course you can then apply your own styles for the view then. For example:
const styles = StyleSheet.create({
dropdown: {
width: 80,
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'white',
padding: 5,
margin: 10
}
});
And this is the result:
I guess it make sense to do it manually like that, I just wonder if the library have it by default or not lol. Oh well