63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, ViewProps, View, DimensionValue } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { ThemedTextInput } from '@/components/theme';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
|
|
type ThemedSearchBarProps = ViewProps & {
|
|
placeholder?: string;
|
|
value: string;
|
|
onChangeText: (text: string) => void;
|
|
width?: DimensionValue;
|
|
height?: number;
|
|
};
|
|
|
|
const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
|
|
placeholder = 'Search',
|
|
value,
|
|
onChangeText,
|
|
width = '100%',
|
|
height = 40,
|
|
style,
|
|
...restProps
|
|
}) => {
|
|
const scheme = useColorScheme() ?? 'dark';
|
|
|
|
return (
|
|
<View style={[styles.container, { width }, style]} {...restProps}>
|
|
<Ionicons
|
|
name="search"
|
|
size={20}
|
|
color={Colors[scheme].text}
|
|
style={styles.icon}
|
|
/>
|
|
<ThemedTextInput
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
height={height}
|
|
width={width}
|
|
style={styles.input}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
icon: {
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
left: 15,
|
|
},
|
|
input: {
|
|
paddingLeft: 45,
|
|
},
|
|
});
|
|
|
|
export default ThemedSearchBar;
|