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

renderButtonText does not work #127

Closed Mexxerio closed 6 years ago

Mexxerio commented 6 years ago

The newly added renderButtonText property does not work. The function gets called after an option is selected, but it doesn't correctly set the button text. It still shows [object Object].

IvanIvaschenko commented 6 years ago

@Mexxerio Check your package.json. And change "react-native-modal-dropdown": "^0.5.0" to "^0.6.0".

Mexxerio commented 6 years ago

@IvanIvaschenko It already is on ^0.6.0. I specifically updated it to use that new feature.

IvanIvaschenko commented 6 years ago

@Mexxerio find the module in node_modules. Open ModalDropdown and look on line 361 you should see this string buttonText: renderButtonText && renderButtonText(rowData) || rowData.toString(). If no try to restart packager.

Mexxerio commented 6 years ago

@IvanIvaschenko It's there.

IvanIvaschenko commented 6 years ago

@Mexxerio share your code.

atul-forbinary commented 6 years ago

is this library work both ios and android , i am still getting [object object ]

mrkirchner commented 6 years ago

I am also getting this issue as well. Here is a snippet of my code I continue to get [object object] and i double checked that im on version ^0.6.0.

selectChangeHandler = (index, facility) => {
  this.props.selectChangeHandler(facility);
};

const renderPrompt = (rowData) => {
  return rowData.name;
};

<ModalDropdown ref={el => this.dropdown = el}
                       options={this.props.options}
                       renderButtonText={renderPrompt}
                       renderRow={rowRender}
                       onSelect={this.selectChangeHandler}/>

Dug around a bit more if i remove the onSelect from ModalDropdown the renderButtonText works.

IvanIvaschenko commented 6 years ago

@atul-forbinary @mrkirchner You can use dirty hack. const Languages = [ { value: 'English', source: require('../../../assets/gb.png'), locale: 'en' }, { value: 'Espanol', source: require('../../../assets/es.png'), locale: 'es' }, { value: 'Francais', source: require('../../../assets/fr.png'), locale: 'fr' }, { value: 'Portuguese', source: require('../../../assets/pt.png'), locale: 'pt' }, { value: 'Deutsch', source: require('../../../assets/de.png'), locale: 'de' }, { value: 'Italiano', source: require('../../../assets/it.png'), locale: 'it' } ]

<ModalDropdown options={Languages.map(item => item.value)} textStyle={[styles.text, styles.regularText]} style={styles.dropdown} onSelect={(indx, value) => this.onSelect(value, indx)} dropdownTextStyle={[styles.text, styles.dropdownText]} dropdownStyle={styles.dropdownStyle} defaultValue={this.state.lang} renderRow={this.renderRow.bind(this)} />

onSelect = async (value, indx) => { let Lang = Languages[indx] ... }

mrkirchner commented 6 years ago

@IvanIvaschenko Not sure what your trying to show here. Anytime i try to setState or call a props.function in my selectHandler it will not work.

@sohobloo Any suggestions on whats going on or is it a bug? Doing a quick look at your js it seems like renderButtonText is only being used onPress does it also need to happen on select(idx) or componentWillReceiveProps?

Issue only occurs on a a onSelect Function which contains a setState in it. I assume its because setState is asynchronous but not sure of a way around that.

mrkirchner commented 6 years ago

Opened an MR https://github.com/sohobloo/react-native-modal-dropdown/pull/131 not sure if that is best way to fix things. Still learning react ...

sohobloo commented 6 years ago

This issue has been fixed. Please update to v0.6.1

Sorry, my fault and thanks to @swb2016(#128) and also thanks to @mrkirchner

Culzean commented 6 years ago

I am also still finding this issue, I have version 0.6.1

brascene commented 6 years ago

@sohobloo same here, 0.6.1 version and still hitting the [object] thing, why is this so tough to get working?