[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, 48 insertions, 0 deletions

diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx
new file mode 100644
index 00000000..3e1e4fdc
--- /dev/null
+++ b/src/components/search/SearchResultsBackground.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Animated, {interpolate} from 'react-native-reanimated';
+import {StyleSheet} from 'react-native';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+
+interface SearchResultsBackgroundProps {
+  top: Animated.Value<number>;
+}
+const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
+  top,
+  children,
+}) => {
+  const opacityBackground: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 1],
+  });
+  const opacityContent: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT / 40, 0],
+    outputRange: [0, 1],
+  });
+  return (
+    <Animated.View
+      style={[styles.container, {opacity: opacityBackground, top}]}>
+      <Animated.ScrollView
+        contentContainerStyle={styles.contentContainer}
+        style={[styles.results, {opacity: opacityContent}]}>
+        {children}
+      </Animated.ScrollView>
+    </Animated.View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    height: SCREEN_HEIGHT,
+    width: SCREEN_WIDTH,
+    padding: 20,
+    position: 'absolute',
+    backgroundColor: '#fff',
+    zIndex: 0,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  results: {
+    marginTop: StatusBarHeight + 110,
+  },
+});
+export default SearchResultsBackground;