diff options
| -rw-r--r-- | src/components/search/SearchBar.tsx | 97 |
1 files changed, 45 insertions, 52 deletions
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index be0eecc7..5e3a1e64 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import { StyleSheet, TextInput, @@ -10,10 +10,10 @@ import { NativeSyntheticEvent, TextInputSubmitEditingEventData, } from 'react-native'; -import Animated from 'react-native-reanimated'; +import Animated, {interpolate} from 'react-native-reanimated'; import Icon from 'react-native-vector-icons/Feather'; import {normalize} from 'react-native-elements'; -import {SCREEN_WIDTH} from '../../utils'; +import {SCREEN_HEIGHT} from '../../utils'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); @@ -27,7 +27,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onChangeText, value, onCancel, - style, + top, }) => { const handleSubmit = ( e: NativeSyntheticEvent<TextInputSubmitEditingEventData>, @@ -36,47 +36,52 @@ const SearchBar: React.FC<SearchBarProps> = ({ Keyboard.dismiss(); }; + /* + * CSS properties for width change animation. + */ + const marginRight: Animated.Node<number> = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 58], + }); + const opacity: Animated.Node<number> = interpolate(top, { + inputRange: [-SCREEN_HEIGHT, 0], + outputRange: [0, 1], + }); + return ( - <> - <View style={[styles.container, style]}> - <Animated.View style={[styles.inputContainer]}> - <AnimatedIcon - name="search" - color={'#7E7E7E'} - size={25} - style={styles.searchIcon} - /> - <TextInput - style={[styles.input]} - placeholder={'Search'} - placeholderTextColor={'#828282'} - onSubmitEditing={handleSubmit} - clearButtonMode="while-editing" - autoCapitalize="none" - autoCorrect={false} - {...{value, onChangeText, onFocus, onBlur}} - /> - </Animated.View> - <View style={styles.cancelButtonView}> - <TouchableOpacity style={styles.cancelButton} onPress={onCancel}> - <Text style={styles.cancelText}>Cancel</Text> - </TouchableOpacity> - </View> - </View> - <Text style={styles.helperText}> - Try searching for "trending on tagg" - </Text> - </> + <View style={styles.container}> + <Animated.View style={styles.inputContainer}> + <AnimatedIcon + name="search" + color={'#7E7E7E'} + size={25} + style={styles.searchIcon} + /> + <TextInput + style={[styles.input]} + placeholder={'Search'} + placeholderTextColor={'#828282'} + onSubmitEditing={handleSubmit} + clearButtonMode="while-editing" + autoCapitalize="none" + autoCorrect={false} + {...{value, onChangeText, onFocus, onBlur}} + /> + </Animated.View> + <Animated.View style={{marginRight, opacity}}> + <TouchableOpacity style={styles.cancelButton} onPress={onCancel}> + <Text style={styles.cancelText}>Cancel</Text> + </TouchableOpacity> + </Animated.View> + </View> ); }; const styles = StyleSheet.create({ container: { height: 40, + paddingHorizontal: 20, flexDirection: 'row', - justifyContent: 'center', - alignItems: 'stretch', - zIndex: 2, }, inputContainer: { flexGrow: 1, @@ -95,27 +100,15 @@ const styles = StyleSheet.create({ color: '#000', letterSpacing: normalize(0.5), }, - cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'}, cancelButton: { - position: 'absolute', height: '100%', + position: 'absolute', justifyContent: 'center', - paddingHorizontal: 5, + paddingHorizontal: 8, }, cancelText: { color: '#818181', - fontWeight: '600', - }, - helperText: { - fontWeight: '400', - fontSize: 14, - lineHeight: normalize(16.71), - color: '#828282', - marginBottom: '2%', - marginHorizontal: '2.5%', - marginTop: '1%', - textAlign: 'center', - width: SCREEN_WIDTH * 0.74, + fontWeight: '500', }, }); |