Keyboard auto open android

src/SelectDropdown.js

@@ -1,5 +1,5 @@
 import React, {forwardRef, useImperativeHandle} from 'react';
-import {View, Text, TouchableOpacity, FlatList} from 'react-native';
+import {View, Text, TouchableOpacity, FlatList, Platform} from 'react-native';
 import styles from './styles';
 import {isExist} from './helpers/isExist';
 import {mergeStyles} from './helpers/mergeStyles';
@@ -59,7 +59,7 @@ const SelectDropdown = (
 ) => {
   const disabledInternalSearch = !!onChangeSearchInputText;
   /* ******************* hooks ******************* */
-  const {dropdownButtonRef, dropDownFlatlistRef} = useRefs();
+  const {dropdownButtonRef, dropDownFlatlistRef, dropdownSearchInputRef} = useRefs();
   const {
     dataArr, //
     selectedItem,
@@ -122,11 +122,20 @@ const SelectDropdown = (
     onSelect && onSelect(item, indexInOriginalArr);
     selectItem(indexInOriginalArr);
   };
+  const onShowModal = () => {
+    if (search && dropdownSearchInputRef.current !== null && Platform.OS === 'android') {
+      setTimeout(() => {
+        dropdownSearchInputRef.current.blur();
+        dropdownSearchInputRef.current.focus();
+      }, 100);
+    }
+  };
   /* ******************** Render Methods ******************** */
   const renderSearchView = () => {
     return (
       search && (
         <Input
+          ref={dropdownSearchInputRef}
           searchViewWidth={buttonLayout.w}
           value={searchTxt}
           valueColor={searchInputTxtColor}
@@ -171,7 +180,7 @@ const SelectDropdown = (
   const renderDropdown = () => {
     return (
       isVisible && (
-        <DropdownModal statusBarTranslucent={statusBarTranslucent} visible={isVisible} onRequestClose={onRequestClose}>
+        <DropdownModal statusBarTranslucent={statusBarTranslucent} visible={isVisible} onRequestClose={onRequestClose} onShow={onShowModal}>
           <DropdownOverlay onPress={closeDropdown} backgroundColor={dropdownOverlayColor} />
           <DropdownWindow layoutStyle={dropdownWindowStyle}>
             <FlatList

src/components/DropdownModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal} from 'react-native';
 
-const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, children}) => {
+const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, onShow, children}) => {
   const defaults = {
     statusBarTranslucent: statusBarTranslucent || false,
   };
@@ -12,7 +12,9 @@ const DropdownModal = ({visible, statusBarTranslucent, onRequestClose, children}
       animationType="none"
       transparent={true}
       statusBarTranslucent={defaults.statusBarTranslucent}
-      visible={visible}>
+      visible={visible}
+      onShow={onShow}
+    >
       {children}
     </Modal>
   );

src/hooks/useRefs.js

@@ -3,9 +3,11 @@ import {useRef} from 'react';
 export const useRefs = () => {
   const dropdownButtonRef = useRef(); // button ref to get positions
   const dropDownFlatlistRef = useRef(null); // ref to the drop down flatlist
+  const dropdownSearchInputRef = useRef(null); // ref to the search input
 
   return {
     dropdownButtonRef,
     dropDownFlatlistRef,
+    dropdownSearchInputRef,
   };
 };