[TMA-345] Sticky Taggs Bar (#146)

* sticks taggs bar to top while scrolling

* used animated value for top padding

Co-authored-by: Shravya Ramesh <shravs1208@gmail.com>

2 files changed, 17 insertions, 6 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 7064f775..71e4f195 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -271,6 +271,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       bounces={shouldBounce}
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
+      stickyHeaderIndices={[4]}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
       }>
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 795797ef..76833d65 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,6 +1,7 @@
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {
   INTEGRATED_SOCIAL_LIST,
@@ -8,10 +9,10 @@ import {
   SOCIAL_LIST,
 } from '../../constants';
 import {getLinkedSocials} from '../../services';
-import Tagg from './Tagg';
+import {loadIndividualSocial, updateSocial} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {loadIndividualSocial, updateSocial} from '../../store/actions';
+import Tagg from './Tagg';
 
 const {View, ScrollView, interpolate, Extrapolate} = Animated;
 interface TaggsBarProps {
@@ -109,9 +110,19 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
     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,
+  });
 
   return taggs.length > 0 ? (
-    <View style={[styles.container, {shadowOpacity}]}>
+    <View style={[styles.container, {shadowOpacity, paddingTop}]}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -120,7 +131,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
       </ScrollView>
     </View>
   ) : (
-    <View style={{height: 0, backgroundColor: 'lightpink'}} />
+    <Fragment />
   );
 };
 
@@ -132,7 +143,6 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 0, height: 2},
     zIndex: 1,
     paddingBottom: 5,
-    paddingTop: 10,
   },
   contentContainer: {
     alignItems: 'center',