Animated the right button on header

gallery-so · Apr 30, 2024 · 23cf5ec · 23cf5ec
1 parent c22e900
commit 23cf5ec
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx b/apps/mobile/src/components/NftSelector/NftSelectorContract/NftSelectorContractHeader.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 
 import { AnimatedRefreshIcon } from '~/components/AnimatedRefreshIcon';
 import { BackButton } from '~/components/BackButton';
@@ -24,6 +25,12 @@ export function NftSelectorContractHeader({
   const { isSyncingCreatedTokensForContract, syncCreatedTokensForExistingContract } =
     useSyncTokensActions();
 
+  const animateStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(rightButton ? 1 : 0),
+    };
+  });
+
   const handleSyncTokensForContract = useCallback(async () => {
     if (!contractId) return;
     syncCreatedTokensForExistingContract(contractId);
@@ -47,7 +54,7 @@ export function NftSelectorContractHeader({
           {title}
         </Typography>
       </View>
-      {rightButton ? <View>{rightButton}</View> : null}
+      <Animated.View style={animateStyle}>{rightButton && rightButton}</Animated.View>
       {isCreator && contractId ? (
         <View>
           <AnimatedRefreshIcon

diff --git a/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx b/apps/mobile/src/components/NftSelector/NftSelectorHeader.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 
 import { BackButton } from '../BackButton';
 import { Typography } from '../Typography';
@@ -11,6 +12,12 @@ type Props = {
 } & PropsWithChildren;
 
 export function NftSelectorHeader({ rightButton, title, children, style }: Props) {
+  const animateStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(rightButton ? 1 : 0),
+    };
+  });
+
   return (
     <View style={style}>
       <View className="px-4 relative flex-row justify-between items-center">
@@ -24,8 +31,7 @@ export function NftSelectorHeader({ rightButton, title, children, style }: Props
             {title}
           </Typography>
         </View>
-
-        {rightButton && rightButton}
+        <Animated.View style={animateStyle}>{rightButton && rightButton}</Animated.View>
       </View>
 
       {children}