Open BowgartField opened 6 years ago
UP !!!
somebody pls help!
Hello i have the same error, please help
I have the same error. UP!
Hi, everybody!
Finally, I have decided to solve this often-appear-issue.
v0.6.0 introduces a new prop renderButtonText(data: object) :string
for you to extract and return the selected option text for the button to display if you choose to use array of objects as options.
here is the example where you can also find in the example codes of this project:
const DEMO_OPTIONS_2 = [
{"name": "Rex", "age": 30},
{"name": "Mary", "age": 25},
{"name": "John", "age": 41},
{"name": "Jim", "age": 22},
{"name": "Susan", "age": 52},
{"name": "Brent", "age": 33},
{"name": "Alex", "age": 16},
{"name": "Ian", "age": 20},
{"name": "Phil", "age": 24},
];
<ModalDropdown style={styles.dropdown_2}
textStyle={styles.dropdown_2_text}
dropdownStyle={styles.dropdown_2_dropdown}
options={DEMO_OPTIONS_2}
renderButtonText={(rowData) => this._dropdown_2_renderButtonText(rowData)}
renderRow={this._dropdown_2_renderRow.bind(this)}
renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
_dropdown_2_renderButtonText(rowData) {
const { name, age } = rowData;
return `${name} - ${age}`;
}
Hi sohobloo, I updated the library but your solution didn't work for me. Here's my code:
import React, {Component} from 'react';
import {
View,
Dimensions,
Text,
StyleSheet,
} from 'react-native';
import {
countries,
callingCountries,
} from 'country-data';
import ModalDropdown from 'react-native-modal-dropdown';
const { width, height } = Dimensions.get('screen');
class DropDown extends Component {
constructor(props){
super(props);
this.state = {
countryCode:'',
countryFlag:'',
listOfCountries: [
{
"code" : callingCountries.CO.countryCallingCodes,
"flag": countries.CO.emoji
},
{
"code" : callingCountries.CL.countryCallingCodes,
"flag": countries.CL.emoji
},
{
"code" : callingCountries.PA.countryCallingCodes,
"flag": countries.PA.emoji
},
{
"code" : callingCountries.PE.countryCallingCodes,
"flag": countries.PE.emoji
},
],
}
}
_renderCountryCodeRow(rowData) {
const light = fontLoaded ? 'OswaldLight' : null;
const { fontLoaded } = this.state;
const { code, flag } = rowData;
return(
<View style={styles.listSection}>
<Text style={styles.flag}>{`${flag}`} </Text>
<Text style={[styles.textBar, {textAlign:'center'}]}> {`${code}`}</Text>
</View>
);
}
_renderButtonText(rowData){
const { code, flag } = rowData;
console.log(`${flag} - ${code}`);
return `${flag} ${code}`;
}
render() {
const { countryCode, countryFlag, listOfCountries, } = this.state;
return(
<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
<ModalDropdown
options={listOfCountries}
defaultValue={'Seleccionar pais'}
style={styles.dropDown}
textStyle={[styles.textBar, {textAlign:'center'}]}
renderRow={this._renderCountryCodeRow.bind(this)}
renderButtonText={(rowData)=>this._renderButtonText(rowData)}
onSelect={(idx, value)=> this.setState({countryCode:value.code, countryFlag:value.flag})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
dropDown: {
justifyContent:'center',
alignItems:'center',
width: width * 0.21,
height :height*0.07
},
textBar:{
color:'rgb(138,158,162)',
fontSize:13
},
flag: {
height:30,
width: 30,
fontSize:25,
textAlign:'center',
},
listSection: {
flexDirection:'row',
width: width * 0.21,
height :height*0.07,
justifyContent:'center',
alignItems:'center'
},
});
export default DropDown;
@sagomezza not working for me too !!!
The react Packager Say that the version in package.json IS not the same as in module folder
@BowgartField have you update into 0.6.0 version? I just update into 0.6.0v and update my code same as @sohobloo explain and its working...
big thanks @sohobloo bro
@adkip ok it's so what i thinks. I'm not able to upgrade to 0.6.0 version because packager say that packager.json version is not the version in module fonder. EDIT: Ok i reinstall the 0.6.0 version but not working.
@sohobloo I updated the version to 0.6.0 and it is not working. The prop is working but the button text is not changing from [object object] to desired text.
@ershubhamgarg The same happens to me
There indeed is a bug with renderButtonText
when using select(idx)
api.
fixed in v0.6.1
Hi, i'm using your library, but got this issue inside dependencies "react-native-modal-dropdown": "^0.6.1",
and code:
const DEMO_OPTIONS = [
{name: 'Personal'},
{name: 'Company 1'},
{name: 'Company 2'},
]
<LinearGradient
start={{ x: 0.0, y: 0.0 }}
end={{ x: 1.0, y: 0.0 }}
colors={['#22FD99', '#46D7F5']}
zIndex={1}
style={this.gradientStyle()}
>
<ModalDropdown ref="dropdown"
style={styles.dropdown}
textStyle={styles.dropdownTextStyle}
dropdownStyle={styles.dropdownStyle}
options={DEMO_OPTIONS}
defaultValue={'Personal'}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
renderRow={this.dropdownRenderRow.bind(this)}
renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.dropdownRenderSeparator(sectionID, rowID, adjacentRowHighlighted)}
onDropdownWillShow={this.onDropdownWillShow}
onDropdownWillHide={this.onDropdownWillHide}
/>
</LinearGradient>
//delegate methods
renderButtonText(rowData) {
console.log('rowdata', rowData);
return `${rowData.name}`;
}
dropdownRenderRow(rowData, rowID, highlighted) {
return (
<View style={styles.dropdownRowStyle}>
<Text style={styles.dropdownRowTextStyle}>
{`${rowData.name}`}
</Text>
</View>
);
}
dropdownRenderSeparator(sectionID, rowID, adjacentRowHighlighted) {
if (rowID == DEMO_OPTIONS.length - 1) return;
let key = `spr_${rowID}`;
return (<View style={styles.dropdownSeparatorStyle}
key={key}
/>);
}
onDropdownWillShow() {
this.setState({ gradientHeight: 150 })
}
onDropdownWillHide() {
this.setState({ gradientHeight: 44 })
}
gradientStyle() {
const { gradientHeight } = this.state
console.log('on gradientStyle change', gradientHeight);
return {
alignSelf: 'center',
width: size.width/1.75,
height: gradientHeight,
borderRadius: 5,
// backgroundColor: 'red',
backgroundColor: 'transparent',
position: 'absolute'
}
}
I think I may have solved this in a duplicate of this: https://github.com/sohobloo/react-native-modal-dropdown/issues/139
Please let me know if the PR fixes it for you!
@dekameron22 sorry for that. try v0.6.2.
Hello,
When I selected the options that i want, In the dropdown the options selected is shown like this "[Object Object]". NB: my options datat are array [{"title": true, "name": value},{"title": false, "name": value}] That's my code
Thanks