react-native-modal-dropdown
react-native-modal-dropdown copied to clipboard
fix onSelect return idx as string and not int
The method of ModalDropdown, onSelect, return value idx as string, not relation with value of defaultIndex that accepted value as number. I have solved, using parseInt
<ModalDropdown
ref={ref => (this.ref = ref)}
style={{
justifyContent: "center",
alignItems: "center",
flexDirection: "row"
}}
dropdownStyle={{
height: Platform.OS == "android" ? 104 : 90,
width: 180
}}
dropdownTextStyle={{
fontSize: 15
}}
showsVerticalScrollIndicator={false}
options={["Global", "City"]}
defaultIndex={parseInt(this.state.index)}
renderRow={(option, index, isSelected) =>
index === this.state.index ? (
<View
style={{
height: Platform.OS == "android" ? 52 : 45,
alignContent: "center",
alignItems: "center",
alignSelf: "center",
flexDirection: "row"
}}
>
<Text
style={{
textAlignVertical: "center",
fontFamily: "OpenSans-Regular",
fontWeight: "400",
color: "#3D3D3D",
fontWeight: "bold"
}}
>
{option}
</Text>
</View>
) : (
<View
style={{
height: Platform.OS == "android" ? 52 : 45,
alignContent: "center",
alignItems: "center",
alignSelf: "center",
flexDirection: "row"
}}
>
<Text
style={{
textAlignVertical: "center",
fontFamily: "OpenSans-Regular",
fontWeight: "400",
color: "#3D3D3D",
fontSize: 13
}}
>
{option}
</Text>
</View>
)
}
onSelect={(idx, value) => {
this.setState({
activeSelectable: value.toLowerCase(),
index: idx
});
this.props.navigation.setParams({
headerTitle: (
<Text
style={{
left: Platform.OS == "android" ? 20 : 0
}}
>
{value} Ranking
</Text>
)
});
}}
>
<View
style={{
flexDirection: "row",
alignContent: "center",
alignSelf: "center",
alignItems: "center"
}}
>
<OwnIcon name="standings_icn" size={35} color="#3D3D3D" />
<Icon name="ios-arrow-down" size={10} color="#3D3D3D" />
</View>
</ModalDropdown>