Correct types

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' | 'light' | 'dark';
     isLoading?: boolean;
     loadingTintColor?: string;
     cancelColor?: string;
-    customSearchInputStyle?: ViewStyle;
+    customSearchInputStyle?: TextStyle;
     customCancelTextStyle?: TextStyle;
   } 
 

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 = {
@@ -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]);
@@ -73,7 +75,7 @@ const SearchComponent = forwardRef((props, ref) => {
       timing(cancelTextOpacity, {
         toValue: 1,
         duration: 200,
-        easing: Easing.linear
+        easing: EasingNode.linear
       }).start();
     } else {
       spring(textInputWidth, {
@@ -85,14 +87,15 @@ const SearchComponent = forwardRef((props, ref) => {
       timing(cancelTextOpacity, {
         toValue: 0,
         duration: 200,
-        easing: Easing.linear
+        easing: EasingNode.linear
       }).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,