Fixed componentWillReceiveProps warning

package.json

@@ -3,7 +3,6 @@
   "version": "0.11.1",
   "license": "BSD-3-Clause",
   "author": "Alexander Nazarov <[email protected]>",
-
   "description": "Material dropdown",
   "keywords": [
     "react",
@@ -16,33 +15,27 @@
     "spinner",
     "select"
   ],
-
   "main": "index.js",
-
   "repository": {
     "type": "git",
     "url": "git://github.com/n4kz/react-native-material-dropdown.git"
   },
-
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
-
   "devDependencies": {
     "babel-eslint": "^8.0.0",
     "eslint": "^4.5.0",
     "eslint-plugin-react": "^7.0.0"
   },
-
   "scripts": {
     "lint": "eslint src example/app.js"
   },
-
   "dependencies": {
     "prop-types": "^15.5.9",
-    "react-native-material-buttons": "^0.5.0",
+    "react-native-material-buttons": "^0.6.0",
     "react-native-material-ripple": "^0.8.0",
-    "react-native-material-textfield": "^0.12.0"
+    "react-native-material-textfield": "^0.16.1"
   }
 }

src/components/dropdown/index.js

@@ -28,6 +28,7 @@ export default class Dropdown extends PureComponent {
 
     valueExtractor: ({ value } = {}, index) => value,
     labelExtractor: ({ label } = {}, index) => label,
+    displayTextExtractor: ({ label, displayText } = {}, index) => displayText || label,
     propsExtractor: () => null,
 
     absoluteRTLLayout: false,
@@ -188,9 +189,11 @@ export default class Dropdown extends PureComponent {
     };
   }
 
-  componentWillReceiveProps({ value }) {
-    if (value !== this.props.value) {
-      this.setState({ value });
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.value !== this.props.value) {
+      this.txRef.current.setValue(this.props.value)
+    } else if (prevState.value !== this.state.value) {
+      this.txRef.current.setValue(this.state.value)
     }
   }
 
@@ -354,7 +357,8 @@ export default class Dropdown extends PureComponent {
       onChangeText(value, index, data);
     }
 
-    setTimeout(() => this.onClose(value), delay);
+    const isItemDisabled = data[index].disabled;
+    setTimeout(() => this.onClose(!isItemDisabled ? value : undefined), delay);
   }
 
   onLayout(event) {
@@ -474,6 +478,8 @@ export default class Dropdown extends PureComponent {
     return `${index}-${valueExtractor(item, index)}`;
   }
 
+  txRef = React.createRef();
+
   renderBase(props) {
     let { value } = this.state;
     let {
@@ -505,15 +511,15 @@ export default class Dropdown extends PureComponent {
 
     return (
       <TextField
+        ref={this.txRef}
         label=''
         labelHeight={dropdownOffset.top - Platform.select({ ios: 1, android: 2 })}
 
         {...props}
 
-        value={title}
         editable={false}
         onChangeText={undefined}
-        renderAccessory={renderAccessory}
+        renderRightAccessory={renderAccessory}
       />
     );
   }
@@ -571,7 +577,7 @@ export default class Dropdown extends PureComponent {
 
     let {
       valueExtractor,
-      labelExtractor,
+      displayTextExtractor,
       propsExtractor,
       textColor,
       itemColor,
@@ -590,7 +596,7 @@ export default class Dropdown extends PureComponent {
     let { style, disabled }
       = props
       = {
-        rippleDuration,
+        rippleDuration: item.disabled ? 0 : rippleDuration,
         rippleOpacity,
         rippleColor: baseColor,
 
@@ -599,17 +605,18 @@ export default class Dropdown extends PureComponent {
 
         ...props,
 
-        onPress: this.onSelect,
+        onPress: item.disabled ? null : this.onSelect,
       };
 
     let value = valueExtractor(item, index);
-    let label = labelExtractor(item, index);
+    let displayText = displayTextExtractor(item, index);
+    const isItemDisabled = item.disabled
 
-    let title = null == label?
+    let title = null == displayText?
       value:
-      label;
+      displayText;
 
-    let color = disabled?
+    let color = isItemDisabled?
       disabledItemColor:
       ~selected?
         index === selected?