Able to custom render dropdown items but not able to display it correctly after selected

[mdere]

                    <Dropdown
                        dropdownPosition={0}
                        containerStyle={{
                            marginTop: 20,
                            width: '100%',
                            backgroundColor: '#FFFFFF',
                            borderRadius: 4,
                            borderStyle: 'solid',
                            borderWidth: 1,
                            borderColor: '#EDEDED',
                            height: 48,
                            borderLeftWidth: 4,
                            justifyContent: 'center',
                            paddingBottom: 4
                        }}
                        inputContainerStyle={{
                            borderBottomColor: 'transparent',
                            paddingLeft: 4
                        }}
                        data={cardTypes}
                        valueExtractor={({value, icon}) => {
                            return (
                                <Text
                                    style={{
                                        textAlign: 'center'
                                    }}>
                                    <Image
                                        style={{
                                            width: 31.5,
                                            height: 20,
                                            paddingRight: 10
                                        }}
                                        source={icon} />
                                    <Text>  {value}</Text>
                                </Text>
                            )
                        }}/>

[mdere]

Alright - so I partially just solved it just now by taking the same function in valueExtractor and added it to prop renderBase....but now the issue the dropdown goes away?

[comanzanares]

Hey, how did you get to actually render what's inside valueExtractor? I tried with your example but still rendering as before. Anything else to consider?

[sergiulucaci]

Refer to label extractor in order to customize dropdown items, something like

<MaterialDropdown
  // other props
  labelExtractor={({value, icon}) => (
    <Text style={{ textAlign: 'center' }}>
      <Image  source={icon}  />
      <Text>  {value}</Text>
    </Text>
  )}}                                  
/>

[mc2147]

I'm facing the same problem now with valueExtractor and labelExtractor. Is there still a way to render custom dropdown items?

[ajinkyadesai-git]

how to implement if there is no key as 'value' in Data array object, please provide an example OR how to use value/labelExtractor to display Dropdown items?

[akiladevinda]

Any updates regarding to this ?

[akiladevinda]

@mdere can you please provide the code that preview selected item

[diragb]

any updates?