22 lines
1.9 KiB
JavaScript
22 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import {View, TextInput, TouchableOpacity} from 'react-native';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons';
|
|
|
|
export default function SearchBar(props){
|
|
return (
|
|
<View style={{ position: 'absolute', width: '90%', backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, border: 1, margin: 20, height: 50, padding: 0, top: 5, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 5, borderRadius: 50}}>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
<View style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 50, borderBottomLeftRadius: 50}}>
|
|
<Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
|
</View>
|
|
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
|
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
|
|
</View>
|
|
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
|
<Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
|
</TouchableOpacity> : null}
|
|
</View>
|
|
</View>
|
|
)
|
|
} |