react-native-dropdown-picker - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

index.d.ts

@@ -66,2 +66,3 @@ declare module "react-native-dropdown-picker" {
     zIndex?: number;
+    zIndexInverse?: number;
     disabled?: boolean;
@@ -68,0 +69,0 @@ isVisible?: boolean;

package.json

 {
   "name": "react-native-dropdown-picker",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -621,7 +621,9 @@ # React native dropdown picker v4
 
-4. Multiple Pickers
+4. Multiple Pickers  
+   The `zIndexInverse` prop must be greater than the first `zIndex` which is `5000`
+
    ```javascript
-   <DropDownPicker zIndex={5000} />
-   <DropDownPicker zIndex={4000} />
-   <DropDownPicker zIndex={3000} />
+   <DropDownPicker zIndex={5000} zIndexInverse={6000} />
+   <DropDownPicker zIndex={4000} zIndexInverse={6000} />
+   <DropDownPicker zIndex={3000} zIndexInverse={6000} />
    ```
@@ -663,2 +665,3 @@
 | `zIndex`                         | This property specifies the stack order of the component.                                                        | `number`                  | `5000`                         | No       |
+| `zIndexInverse`                         | Adds a different zIndex to the dropdown box when showing it above the picker.                                                        | `number`                  | `5000`                         | No       |
 | `disabled`                       | Disables the component.                                                                                          | `bool`                    | `false`                        | No       |
@@ -665,0 +668,0 @@ | `isVisible`                      | Open or close the dropdown box.                                                                                  | `bool`                    | `false`                        | No       |

src/index.js

@@ -11,2 +11,3 @@ import React from 'react';
     Dimensions,
+    Keyboard,
 } from 'react-native';
@@ -67,2 +68,3 @@
             direction: 'top',
+            keyboardHeight: 0,
         };
@@ -136,2 +138,4 @@ this.dropdownCoordinates = [];
     componentDidMount() {
+        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
+        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
         this.props.controller(this);
@@ -157,2 +161,7 @@ }
 
+    componentWillUnmount() {
+        this.keyboardDidShowListener.remove();
+        this.keyboardDidHideListener.remove();
+    }
+
     reset() {
@@ -185,3 +194,4 @@ const item = this.props.multiple ? [] : this.null();
             dropdownHeight + // Height of dropdown
-            this.props.bottomOffset; // Extra space, if we have bottom tab or something
+            this.props.bottomOffset + // Extra space, if we have bottom tab or something
+            this.state.keyboardHeight; // Height of keyboard (0 if not showing)
 
@@ -411,2 +421,3 @@ this.setState({
     adjustStylesToDirection(...presets) {
+        presets = presets.map((style) => StyleSheet.flatten(style));
         let merged = Object.assign({}, ...presets);
@@ -533,2 +544,14 @@
 
+    keyboardDidShow(keyboardEvent) {
+        this.setState({
+            keyboardHeight: keyboardEvent.endCoordinates.height
+        });
+    }
+
+    keyboardDidHide(keyboardEvent) {
+        this.setState({
+            keyboardHeight: 0
+        });
+    }
+
     render() {
@@ -614,3 +637,3 @@ this.props.controller(this);
                         maxHeight: this.props.dropDownMaxHeight,
-                        zIndex: this.props.zIndex
+                        zIndex: this.state.direction === 'top' ? this.props.zIndex : this.props.zIndexInverse
                     }
@@ -681,2 +704,3 @@ ]}>
     zIndex: 5000,
+    zIndexInverse: 6000,
     disabled: false,
@@ -683,0 +707,0 @@ searchable: false,

No alert changes

Improved metrics

Total package byte prevSize

97927

increased by1.39%

Lines of code

814

increased by2.78%

Number of lines in readme file

694

increased by0.43%

No dependency changes