unfocus search input when keyboard is hidden

src/libs/native-base/native-base-extension.d.ts

@@ -1,7 +1,8 @@
 /// <reference path="../../../node_modules/native-base/index.d.ts" />
 
+import { FlatListProps } from 'react-native';
+
 declare module 'native-base' {
-  import { FlatListProps } from 'react-native';
   namespace NativeBase {
     interface List {
       ListEmptyComponent?: FlatListProps<any>['ListEmptyComponent'];

src/screens/HomeScreen/components/Header/Header.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useDebounce } from 'react-use';
 
+import { Keyboard, TextInput } from 'react-native';
 import { Icon, Input, Item, Header as NBHeader } from 'native-base';
 
 export interface HeaderProps {
@@ -8,6 +9,7 @@ export interface HeaderProps {
 }
 
 const Header = ({ onSearch }: HeaderProps) => {
+  const inputRef = useRef<Input>(null);
   const [search, setSearch] = useState('');
   useDebounce(
     () => {
@@ -18,12 +20,30 @@ const Header = ({ onSearch }: HeaderProps) => {
     500,
     [search],
   );
+  useEffect(() => {
+    const subscription = Keyboard.addListener('keyboardDidHide', () => {
+      const input = (inputRef.current as any)?._root as TextInput;
+      if (input?.isFocused()) {
+        input?.blur();
+      }
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   return (
     <NBHeader searchBar rounded hasSegment>
       <Item>
         <Icon name="ios-search" />
-        <Input placeholder="Wyszukaj kwalifikację" onChangeText={setSearch} />
+        <Input
+          placeholder="Wyszukaj kwalifikację"
+          onChangeText={setSearch}
+          value={search}
+          ref={inputRef}
+        />
       </Item>
+      <Icon name="ios-search" />
     </NBHeader>
   );
 };