24 lines
1.7 KiB
JavaScript
24 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Assets from '../../../../components/assets.manager.js';
|
|
import Icon from '../../../../components/icons';
|
|
|
|
export default function SearchBar(props){
|
|
return (
|
|
<View style={{ position: 'absolute', width: '90%', backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, top: 5, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 5}}>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
<View style={{flex: 0, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, padding: 10, justifyContent: 'center'}}>
|
|
<Icon.Ionicons name="md-search" size={22} color={props.textColor} />
|
|
</View>
|
|
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
|
|
<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={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
|
<Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />
|
|
</TouchableOpacity> : null}
|
|
</View>
|
|
</View>
|
|
)
|
|
} |