Refactor components to use Animated API and improve layout transitions

Author: codeAbinash

src/components/Settings/SettGroup.tsx

@@ -1,15 +1,16 @@
 import { Colors } from '@utils/colors'
 import { SemiBold } from '@utils/fonts'
-import { cn } from '@utils/utils'
+import { cn, layout } from '@utils/utils'
 import { View, ViewProps } from 'react-native'
+import Animated from 'react-native-reanimated'
 
 type SettGroupProps = ViewProps & {
   title?: string
   accent?: string
 }
 export default function SettGroup({ children, title, className, accent = Colors.accent, ...rest }: SettGroupProps) {
   return (
-    <View className={cn('bg-white py-3 dark:bg-zinc-950', className)} {...rest}>
+    <Animated.View className={cn('bg-white py-3 dark:bg-zinc-950', className)} layout={layout} {...rest}>
       {title && (
         <SemiBold
           className={'px-6 pb-1.5 pt-0.5 text-accent'}
@@ -19,6 +20,6 @@ export default function SettGroup({ children, title, className, accent = Colors.
         </SemiBold>
       )}
       <View style={{ gap: 8 }}>{children}</View>
-    </View>
+    </Animated.View>
   )
 }

src/screens/Animations.tsx

@@ -33,7 +33,7 @@ export default function Home({ navigation }: { navigation: StackNav }) {
         className='items-center justify-center'
         activeOpacity={0.9}
         onPress={() => {
-          navigation.navigate('Animations')
+          // navigation.navigate('Animations')
         }}
       >
         {/* <Animated.Image source={Images.app_icon} style={[styles.icon, animatedStyle]} /> */}

src/screens/DeveloperOptions/MMKVDataList.tsx

@@ -13,7 +13,7 @@ import { useIsFocused } from '@react-navigation/native'
 import { Colors } from '@utils/colors'
 import { ls, type StorageKeys } from '@utils/storage'
 import type { NavProp } from '@utils/types'
-import { delayedFadeAnimationSearch } from '@utils/utils'
+import { delayedFadeAnimationSearch, exiting, layout } from '@utils/utils'
 import React, { useEffect } from 'react'
 import { View } from 'react-native'
 import Animated from 'react-native-reanimated'
@@ -64,7 +64,12 @@ export default function MMKVDataList({ navigation }: NavProp) {
 
           <SettGroup title='Stored keys' className='pb-4'>
             {searchResults?.map((item, i) => (
-              <Animated.View key={item} entering={delayedFadeAnimationSearch(search, i)}>
+              <Animated.View
+                key={item}
+                entering={delayedFadeAnimationSearch(search, i)}
+                exiting={exiting}
+                layout={layout}
+              >
                 <SettOption
                   title={item}
                   arrow

src/screens/Try/TyrItOut.tsx

@@ -28,11 +28,12 @@ import { Group } from '@shopify/react-native-skia'
 import { Colors } from '@utils/colors'
 import { Bold } from '@utils/fonts'
 import type { NavProp } from '@utils/types'
+import { delayedFadeAnimationSearch, exiting, layout } from '@utils/utils'
 import type { RootStackParamList } from 'App'
 import React, { useMemo } from 'react'
 import { View, useColorScheme } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
-import { FadeIn } from 'react-native-reanimated'
+import Animated, { FadeIn } from 'react-native-reanimated'
 import type { SvgProps } from 'react-native-svg'
 
 type Tool = {
@@ -130,16 +131,20 @@ export default function TyrItOut({ navigation }: NavProp) {
               {group.startText && <SettText>{group.startText}</SettText>}
               <SettGroup title={group.title}>
                 {group.tools.map((tool, i) => (
-                  // <Animated.View key={i} entering={delayedFadeAnimation(search, i)}>
-                  <SettOption
+                  <Animated.View
                     key={i}
-                    title={tool.title}
-                    Icon={<RoundedIcon Icon={tool.Icon} className={tool.className} />}
-                    arrow={tool.arrow ?? true}
-                    // Update onPress handlers to correctly navigate using the 'to' property
-                    onPress={() => tool.to && navigation.navigate(tool.to as any)}
-                  />
-                  // </Animated.View>
+                    entering={delayedFadeAnimationSearch(search, i)}
+                    exiting={exiting}
+                    layout={layout}
+                  >
+                    <SettOption
+                      title={tool.title}
+                      Icon={<RoundedIcon Icon={tool.Icon} className={tool.className} />}
+                      arrow={tool.arrow ?? true}
+                      // Update onPress handlers to correctly navigate using the 'to' property
+                      onPress={() => tool.to && navigation.navigate(tool.to as any)}
+                    />
+                  </Animated.View>
                 ))}
               </SettGroup>
               {group.endText && <SettText>{group.endText}</SettText>}

src/utils/fonts.tsx

@@ -1,4 +1,6 @@
 import { StyleSheet, Text, type TextProps } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { layout } from './utils'
 
 export const REGULAR = {
   fontFamily: 'JosefinSans-Regular',
@@ -18,9 +20,9 @@ export const LIGHT = {
 
 export function Medium({ children, style, ...props }: TextProps) {
   return (
-    <Text style={[MEDIUM, style]} {...props}>
+    <Animated.Text style={[MEDIUM, style]} {...props} layout={layout}>
       {children}
-    </Text>
+    </Animated.Text>
   )
 }
 

src/utils/utils.ts

@@ -2,7 +2,7 @@ import type { DistanceUnit, TemperatureUnit, TimeFormat } from '@/zustand/weathe
 import { ls } from '@utils/storage'
 import { clsx, type ClassValue } from 'clsx'
 import { Alert, Share } from 'react-native'
-import { FadeIn } from 'react-native-reanimated'
+import { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated'
 import { twMerge } from 'tailwind-merge'
 import { SCREEN_TRANSITION } from './constants'
 
@@ -242,3 +242,6 @@ export function delayedFadeAnimation(i: number) {
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export const exiting = FadeOut.duration(250)
+export const layout = LinearTransition.duration(250)