File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, {useContext, useState} from 'react';
import {View, StyleSheet, Alert, Dimensions, TextInput} from 'react-native';
import {IconButton} from 'react-native-paper';
import {useNavigation} from '@react-navigation/native';
import {MapContext} from './../context/MapContext';
import {GRAY, PRIMERY} from '../color';
const {width: windowWidth} = Dimensions.get('window');
export default function Search({placeholder, ref}) {
const navigation = useNavigation();
const {setSearchQuery, onQuery} = useContext(MapContext);
const [inputText, setInputText] = useState('');
const onSubmitEditing = async () => {
console.log(inputText);
try {
const nodes = await onQuery(inputText);
if (nodes.length) {
navigation.navigate('DestinationList');
} else {
throw Error();
}
} catch (err) {
setSearchQuery(null);
Alert.alert('알림', '목적지를 정확히 입력해주세요.');
navigation.navigate('Main');
}
};
return (
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder={placeholder}
placeholderTextColor={GRAY}
ref={ref}
value={inputText}
onChangeText={text => setInputText(text)}
onSubmitEditing={onSubmitEditing}
/>
<IconButton
icon="magnify"
size={27}
color={PRIMERY}
onPress={onSubmitEditing}
/>
</View>
);
}
const styles = StyleSheet.create({
inputContainer: {
// marginLeft: 8,
paddingLeft: 20,
paddingRight: 10,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
width: windowWidth * 0.9,
borderWidth: 1.5,
borderRadius: 40,
borderColor: PRIMERY,
backgroundColor: 'white',
elevation: 10,
},
input: {
marginVertical: 2,
marginHorizontal: 15,
borderRadius: 40,
flex: 1,
},
});