1 files changed, 43 insertions, 47 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 06acadc1..4d567b25 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,6 +1,11 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
-import Animated from 'react-native-reanimated';
+import React, {useEffect, useState} from 'react';
+import {LayoutChangeEvent, StyleSheet} from 'react-native';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {
@@ -14,22 +19,22 @@ import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import Tagg from './Tagg';
 
-const {View, ScrollView, interpolate, Extrapolate} = Animated;
+const {View, ScrollView} = Animated;
 interface TaggsBarProps {
-  y: Animated.Value<number>;
+  y: Animated.SharedValue<number>;
   profileBodyHeight: number;
   userXId: string | undefined;
   screenType: ScreenType;
-  whiteRing: boolean | undefined;
   linkedSocials?: string[];
+  onLayout: (event: LayoutChangeEvent) => void;
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
   profileBodyHeight,
   userXId,
   screenType,
-  whiteRing,
   linkedSocials,
+  onLayout,
 }) => {
   const dispatch = useDispatch();
   let [taggs, setTaggs] = useState<Object[]>([]);
@@ -37,7 +42,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   const {user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
-
+  const insetTop = useSafeAreaInsets().top;
   /**
    * Updates the individual social that needs update
    * If username is empty, update nonintegrated socials like Snapchat and TikTok
@@ -77,12 +82,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
-            whiteRing={whiteRing ? whiteRing : undefined}
+            whiteRing={false}
           />,
         );
         i++;
       }
-      if (!userXId && !whiteRing) {
+      if (!userXId) {
         for (let social of unlinkedSocials) {
           new_taggs.push(
             <Tagg
@@ -95,7 +100,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               userXId={userXId}
               screenType={screenType}
               user={user}
-              whiteRing={whiteRing ? whiteRing : undefined}
+              whiteRing={false}
             />,
           );
           i++;
@@ -108,64 +113,55 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
       loadData();
     }
   }, [taggsNeedUpdate, user]);
-
-  const shadowOpacity: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20,
-    ],
-    outputRange: [0, 0.2],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const paddingTop: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      PROFILE_CUTOUT_BOTTOM_Y +
-        profileBodyHeight -
-        (useSafeAreaInsets().top + 10),
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-    ],
-    outputRange: [10, useSafeAreaInsets().top],
-    extrapolate: Extrapolate.CLAMP,
-  });
+  const paddingTopStylesProgress = useDerivedValue(() =>
+    interpolate(
+      y.value,
+      [PROFILE_CUTOUT_BOTTOM_Y, PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight],
+      [0, 1],
+      Extrapolate.CLAMP,
+    ),
+  );
+  const shadowOpacityStylesProgress = useDerivedValue(() =>
+    interpolate(
+      y.value,
+      [
+        PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
+        PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + insetTop,
+      ],
+      [0, 1],
+      Extrapolate.CLAMP,
+    ),
+  );
+  const animatedStyles = useAnimatedStyle(() => ({
+    shadowOpacity: shadowOpacityStylesProgress.value / 5,
+    paddingTop: paddingTopStylesProgress.value * insetTop,
+  }));
 
   return taggs.length > 0 ? (
-    <View
-      style={
-        whiteRing
-          ? [styles.spContainer]
-          : [styles.container, {shadowOpacity, paddingTop}]
-      }>
+    <View style={[styles.container, animatedStyles]} onLayout={onLayout}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.contentContainer}>
+        contentContainerStyle={[styles.contentContainer]}>
         {taggs}
       </ScrollView>
     </View>
   ) : (
-    <Fragment />
+    <></>
   );
 };
 
 const styles = StyleSheet.create({
-  spContainer: {
-    shadowColor: '#000',
-    shadowRadius: 10,
-    shadowOffset: {width: 0, height: 2},
-    zIndex: 1,
-    marginBottom: 25,
-  },
   container: {
     backgroundColor: 'white',
     shadowColor: '#000',
     shadowRadius: 10,
     shadowOffset: {width: 0, height: 2},
     zIndex: 1,
-    paddingBottom: 5,
   },
   contentContainer: {
     alignItems: 'center',
-    paddingBottom: 5,
+    paddingBottom: 15,
   },
 });