Closed Softkeydel closed 1 month ago
Hi @Softkeydel,
You should be able to disable the dropdown by passing through a disabled attribute through the inputProps (Please refer to the DropDownPropsInterface). Futhermore, you will have to double-check if the component has been disabled before allowing the showDropDown function to fire. Have a look at the example I made in a expo snack here. Hope this helps!
If the expo snack gets removed please refer to my example below...
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Provider } from 'react-native-paper';
import DropDown from "react-native-paper-dropdown";
export default class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
list: [
{
label: 'Bobby',
value: '1'
},
{
label: 'Ella',
value: '2'
},
{
label: 'Rose',
value: '3'
},
],
value: '',
visible: false,
disable: true
}
}
toggleDropdownVisibility = () => {
const { visible, disable } = this.state;
//Part 1: Check if the dropdown is NOT set to disabled before allowing the UI to open dropdown menu.
if(!disable) {
this.setState({ visible: !visible });
}
};
render() {
const { visible, value, list, disable } = this.state;
return (
<Provider>
<View style={styles.container}>
<DropDown
label='First Name'
value={value}
setValue={(x) => this.setState({ value: x })}
visible={visible}
showDropDown={this.toggleDropdownVisibility}
onDismiss={this.toggleDropdownVisibility}
list={list}
inputProps={{
//Part 2: Passing boolean to disable textInput.
disabled: disable,
}}
/>
</View>
</Provider>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
I made a PR to make it easier to disable: https://github.com/fateh999/react-native-paper-dropdown/pull/73
thanks @MartynFitzgerald @bombillazo I resolved it by adding disabled={true} property in the module
Should be fixed in latest release v2.0.3, did a full refactor of library so docs are in WIP, meanwhile you can check the example folder for demo code.
How to disable the dropdown so that the value can't be changed after setting and the dropdown border color will be lighter gray like TextInput?
Please help