CODEWITHSUNDEEP
javascriptreact-native
Taylor A. Leach
Taylor A. Leach

Reputation: 2324

React Native custom cross-platform dropdown select element

I have searched quite thoroughly with not much luck. I am having trouble implementing a simple custom dropdown select element for my application.

I am hoping for a cross-platform (iOS & Android) solution like the simple custom JS dropdown featured here https://www.w3schools.com/howto/howto_custom_select.asp

Is this something I should just be creating myself with react native views and some state? I'm still trying to get a feel of what solutions are unrealistic. Could anyone give me an example from a professional project?

I am trying to avoid using the native Picker from here since I cannot style them to match my designer's needs. https://github.com/react-native-community/react-native-picker

I tried this package but it seems to be having trouble with the latest versions and I need something reliable. https://github.com/sohobloo/react-native-modal-dropdown I was also looking at this package as it seems to be nearly perfect for my needs but again it has not been updated in 2 years https://github.com/n4kz/react-native-material-dropdown

Upvotes: 1

Views: 2274

Answers (2)

Mr. Robot
Mr. Robot

Reputation: 1824

My recommendation would be to go with something out there, as I will generally make implementation quicker for you, although as you say there might be a trade off in styling.

I've recently been in the situation a few times where I've really had to look hard for good, maintained components for React Native, but they certainly exist.

I've been successfully using react-native-paper recently. You could consider their accordion drop down list but may not suit in styling as it follows material UI guidelines.

https://callstack.github.io/react-native-paper/

Upvotes: 2

cschultz1272
cschultz1272

Reputation: 130

I used this in my project and it works perfectly:

https://github.com/mrlaessig/react-native-autocomplete-input

you can just use the onFocus prop to make it dropdown with a click instead of when the user firsts typing and onEndEditing prop to hide it when the user selects an option.

here's my full implementation for reference, I had to go into the code a bit to check for these props since the documentation didn't include it.

<Autocomplete
        data={filterNames()}
        placeholder={'Who are you here to see?'}
        onChangeText={item => setTextAndShowResults(item)}
        onFocus={() => setHideResults(false)}
        onEndEditing={() => setHideResults(true)}
        defaultValue={getDefaultValue()}
        keyExtractor={(item, i) => {
          return item.id;
        }}
        returnKeyType={'next'}
        listStyle={styles.listStyle}
        inputContainerStyle={styles.borderWidth0}
        style={styles.autoCompleteButtonStyle}
        hideResults={hideResults}
        renderItem={({ item, i }) => (
          <TouchableOpacity onPress={() => setTextAndHideResults(item)}>
            <Text style={styles.listTextStyle}>{item.name}</Text>
          </TouchableOpacity>
        )}
/>

Upvotes: 1

Related Questions