How to disable dropdown

[Softkeydel]

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

[MartynFitzgerald]

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,
  },
});

[bombillazo]

I made a PR to make it easier to disable: https://github.com/fateh999/react-native-paper-dropdown/pull/73

[Softkeydel]

thanks @MartynFitzgerald @bombillazo I resolved it by adding disabled={true} property in the module

[fateh999]

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.