From 69a03f1045f1e2c9f9b699e5144c96c2b4ce0f2a Mon Sep 17 00:00:00 2001
From: Artem Kamysh <a.kamysh@corp.mail.ru>
Date: Sat, 23 Apr 2022 00:05:16 +0300
Subject: [PATCH 1/3] correct-types

---
 index.d.ts                   |  8 ++++----
 src/searchComponent/index.js | 13 ++++++++-----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 57e3f3a..03255c2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,18 +1,18 @@
 declare module 'react-native-search-component' {
-  import {  ViewStyle, TextStyle } from "react-native"
+  import { TextStyle, NativeSyntheticEvent, TextInputChangeEventData } from "react-native"
   import React from 'react'
 
   export interface SearchComponentProps {
     placeholder?: string;
     placeholderTextColor?: string;
-    onChange: () => void;
+    onChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void;
     value: string;
     onSearchClear?: () => void;
-    theme?: 'LIGHT' | 'DARK';
+    theme?: 'LIGHT' | 'DARK' | 'ligth' | 'dark';
     isLoading?: boolean;
     loadingTintColor?: string;
     cancelColor?: string;
-    customSearchInputStyle?: ViewStyle;
+    customSearchInputStyle?: TextStyle;
     customCancelTextStyle?: TextStyle;
   } 
 
diff --git a/src/searchComponent/index.js b/src/searchComponent/index.js
index 2de74a8..26e1de5 100644
--- a/src/searchComponent/index.js
+++ b/src/searchComponent/index.js
@@ -41,6 +41,8 @@ const CloseIcon = ({ theme }) => {
 }
 
 const SearchComponent = forwardRef((props, ref) => {
+  const safeTheme = props?.theme.toUpperCase();
+
   const [searchInputFocussed, setSearchInputFocussed] = useState(false);
   const { width } = useWindowDimensions();
   const memoizedTextInputOnFocusWidth = useMemo(() => width - (50 + 32 + 32), [width]);
@@ -89,10 +91,11 @@ const SearchComponent = forwardRef((props, ref) => {
       }).start();
     }
   }, [searchInputFocussed]);
+
   return (
     <Animated.View style={styles.searchInputWrapper}>
       <Animated.View style={styles.searchIconWrapper}>
-        <SearchIcon theme={props?.theme} />
+        <SearchIcon theme={safeTheme} />
       </Animated.View>
       <Animated.View style={{ width: textInputWidth, paddingVertical: 4 }}>
         <TextInput
@@ -106,13 +109,13 @@ const SearchComponent = forwardRef((props, ref) => {
           style={[
             styles.searchInputStyle,
             {
-              backgroundColor: styledTheme[props?.theme].textInputBackground,
-              color: styledTheme[props?.theme].textColor,
+              backgroundColor: styledTheme[safeTheme].textInputBackground,
+              color: styledTheme[safeTheme].textColor,
             },
             props.customSearchInputStyle,
           ]}
           placeholder={props?.placeholder}
-          placeholderTextColor={props?.placeholderTextColor || styledTheme[props?.theme].placeholderTextColor}
+          placeholderTextColor={props?.placeholderTextColor || styledTheme[safeTheme].placeholderTextColor}
         />
         {
           props?.isLoading ? (
@@ -179,7 +182,7 @@ SearchComponent.propTypes = {
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
   onSearchClear: PropTypes.func,
-  theme: PropTypes.oneOf(['LIGHT', 'DARK']),
+  theme: PropTypes.oneOf(['LIGHT', 'DARK', 'light', 'dark']),
   isLoading: PropTypes.bool,
   loadingTintColor: PropTypes.string,
   cancelColor: PropTypes.string,

From 543c09dc1723ea4b84a2ba7339e4a4d32e5c829c Mon Sep 17 00:00:00 2001
From: Artem Kamysh <a.kamysh@corp.mail.ru>
Date: Sat, 23 Apr 2022 00:59:41 +0300
Subject: [PATCH 2/3] fix: Easing was renamed to EasingNode in Reanimated 2.
 Please use EasingNode instead

---
 src/searchComponent/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/searchComponent/index.js b/src/searchComponent/index.js
index 26e1de5..7b61a9e 100644
--- a/src/searchComponent/index.js
+++ b/src/searchComponent/index.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { ActivityIndicator, Platform, StyleSheet, Text, TextInput, TouchableOpacity, useWindowDimensions, View, ViewPropTypes } from 'react-native';
-import Animated, { Easing, spring, timing, Value } from 'react-native-reanimated';
+import Animated, { EasingNode, spring, timing, Value } from 'react-native-reanimated';
 import Svg, { Path } from 'react-native-svg';
 
 const styledTheme = {
@@ -75,7 +75,7 @@ const SearchComponent = forwardRef((props, ref) => {
       timing(cancelTextOpacity, {
         toValue: 1,
         duration: 200,
-        easing: Easing.linear
+        easing: EasingNode.linear
       }).start();
     } else {
       spring(textInputWidth, {
@@ -87,7 +87,7 @@ const SearchComponent = forwardRef((props, ref) => {
       timing(cancelTextOpacity, {
         toValue: 0,
         duration: 200,
-        easing: Easing.linear
+        easing: EasingNode.linear
       }).start();
     }
   }, [searchInputFocussed]);

From 3ae0ed292eb73e313cbb1f6d40762a31c8d1fe64 Mon Sep 17 00:00:00 2001
From: Artem Kamysh <a.kamysh@corp.mail.ru>
Date: Sat, 23 Apr 2022 02:25:44 +0300
Subject: [PATCH 3/3] fix: types

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 03255c2..f55fd62 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,7 +8,7 @@ declare module 'react-native-search-component' {
     onChange: (e: NativeSyntheticEvent<TextInputChangeEventData>) => void;
     value: string;
     onSearchClear?: () => void;
-    theme?: 'LIGHT' | 'DARK' | 'ligth' | 'dark';
+    theme?: 'LIGHT' | 'DARK' | 'light' | 'dark';
     isLoading?: boolean;
     loadingTintColor?: string;
     cancelColor?: string;