40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { View, TextInput, Text } from 'react-native';
|
|
import { SearchBarProps } from './searchBar.props';
|
|
import { getStyles } from './searchBar.styles';
|
|
import { useAppTheme } from '@theme';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
export const SearchBar: React.FC<SearchBarProps> = ({
|
|
value,
|
|
onChangeText,
|
|
placeholder = 'Search...',
|
|
onFocus,
|
|
onSubmit,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<MaterialCommunityIcons
|
|
name="magnify"
|
|
size={24}
|
|
color={colors.primary}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.placeholder}
|
|
onFocus={onFocus}
|
|
onSubmitEditing={onSubmit}
|
|
returnKeyType="search"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|