react-native-modal-dropdown icon indicating copy to clipboard operation
react-native-modal-dropdown copied to clipboard

Arrow at the end of the button

Open MegazeroMZ opened this issue 6 years ago • 2 comments

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

MegazeroMZ avatar Jun 21 '18 14:06 MegazeroMZ

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: image

liikinn avatar Jul 06 '18 05:07 liikinn

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

MegazeroMZ avatar Jul 06 '18 12:07 MegazeroMZ