message: chore: Evaluate SearchBox
diff: import React from 'react';
  -import {
  - NativeSyntheticEvent,
  - StyleSheet,
  - TextInput as RNTextInput,
  - Text,
  - TextInputFocusEventData,
  - TextInputProps,
  - View
  -} from 'react-native';
  +import { StyleSheet, Text, TextInput as RNTextInput, TextInputProps, View } from 'react-native';
  import Touchable from 'react-native-platform-touchable';
  -import TextInput from '../presentation/TextInput';
  +import { themes } from '../constants/colors';
  import I18n from '../i18n';
  import { CustomIcon } from '../lib/Icons';
  -import sharedStyles from '../views/Styles';
  -import { withTheme } from '../theme';
  -import { themes } from '../constants/colors';
  +import TextInput from '../presentation/TextInput';
  +import { useTheme } from '../theme';
  import { isIOS } from '../utils/deviceInfo';
  +import sharedStyles from '../views/Styles';
  const styles = StyleSheet.create({
  container: {
  @@ -52,41 +44,32 @@ const styles = StyleSheet.create({
  }
  });
  -interface ISearchBox {
  +interface ISearchBox extends TextInputProps {
  value?: string;
  - onChangeText: TextInputProps['onChangeText'];
  - onSubmitEditing?: () => void;
  hasCancel?: boolean;
  onCancelPress?: Function;
  - theme?: string;
  inputRef?: React.Ref<RNTextInput>;
  - testID?: string;
  - onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  }
  -const CancelButton = (onCancelPress: Function, theme: string) => (
  +const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
  + const { theme } = useTheme();
  + return (
  <Touchable onPress={onCancelPress} style={styles.cancel}>
  <Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
  </Touchable>
  );
  +};
  -const SearchBox = ({
  - onChangeText,
  - onSubmitEditing,
  - testID,
  - hasCancel,
  - onCancelPress,
  - inputRef,
  - theme,
  - ...props
  -}: ISearchBox) => (
  +const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
  + const { theme } = useTheme();
  + return (
  <View
  style={[
  styles.container,
  - { backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
  + { backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
  ]}>
  - <View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
  - <CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
  + <View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
  + <CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
  <TextInput
  ref={inputRef}
  autoCapitalize='none'
  @@ -96,16 +79,14 @@ const SearchBox = ({
  placeholder={I18n.t('Search')}
  returnKeyType='search'
  style={styles.input}
  - testID={testID}
  underlineColorAndroid='transparent'
  - onChangeText={onChangeText}
  - onSubmitEditing={onSubmitEditing}
  - theme={theme!}
  + theme={theme}
  {...props}
  />
  </View>
  - {hasCancel ? CancelButton(onCancelPress!, theme!) : null}
  + {hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
  </View>
  );
  +};
  -export default withTheme(SearchBox);
  +export default SearchBox;
  