[TMA-25] Search Functionality (#33)

* Create tabs gradient component

* Add endpoint constant and types for search

* Create search functionality

* [TMA-19*] Abstracted out Social Icon logic (#32)

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Formatted datetime in PostHeader

* Abstracted out social icon switching logic

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Abstracted out social icon switching logic

* Change View to TouchableOpacity

* Create tabs gradient component

* Add endpoint constant and types for search

* Create search functionality

* Change View to TouchableOpacity

Co-authored-by: Justin Shillingford <jgs272@cornell.edu>

1 files changed, 60 insertions, 0 deletions

diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
new file mode 100644
index 00000000..2a022f50
--- /dev/null
+++ b/src/components/search/SearchHeader.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {SCREEN_HEIGHT} from '../../utils';
+import {View, StyleSheet, ViewProps} from 'react-native';
+import Animated, {
+  Value,
+  interpolateColors,
+  interpolate,
+} from 'react-native-reanimated';
+
+interface SearchHeaderProps extends ViewProps {
+  top: Value<number>;
+}
+const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
+  const color: Animated.Node<number> = interpolateColors(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputColorRange: ['#fff', '#000'],
+  });
+  const searchOpacity: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 1],
+  });
+  const exploreOpacity: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [1, 0],
+  });
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.headerContainer}>
+        <Animated.Text
+          style={[styles.header, {opacity: exploreOpacity, color}]}>
+          Explore
+        </Animated.Text>
+      </View>
+      <View style={styles.headerContainer}>
+        <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
+          Search
+        </Animated.Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: 30,
+  },
+  headerContainer: {
+    position: 'absolute',
+    left: '50%',
+  },
+  header: {
+    position: 'relative',
+    right: '50%%',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+export default SearchHeader;