sohobloo / react-native-modal-dropdown

A react-native dropdown/picker/selector component for both Android & iOS.
MIT License
1.19k stars 477 forks source link

Arrow at the end of the button #174

Open MegazeroMZ opened 6 years ago

MegazeroMZ commented 6 years ago

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

liikinn commented 6 years ago

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

MegazeroMZ commented 6 years ago

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