From 4721cedb8a1f4cc4ee9c69e38e93bab051a5e79d Mon Sep 17 00:00:00 2001
From: Hayden Briese <haydenbriese@gmail.com>
Date: Mon, 22 Jul 2024 13:17:35 +1000
Subject: [PATCH] feat(app): fadein Pane(s)

---
 app/src/components/layout/Pane.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/src/components/layout/Pane.tsx b/app/src/components/layout/Pane.tsx
index d2577a90c..2a4b92e2c 100644
--- a/app/src/components/layout/Pane.tsx
+++ b/app/src/components/layout/Pane.tsx
@@ -1,9 +1,10 @@
 import { createStyles, useStyles } from '@theme/styles';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useLayoutEffect, useRef } from 'react';
-import { View, ViewProps } from 'react-native';
+import { ViewProps } from 'react-native';
 import { PANES_MOUNTED } from './Panes';
 import { BREAKPOINTS } from '@theme/styles';
+import Animated, { FadeIn } from 'react-native-reanimated';
 
 const MAX_PANES: Record<keyof typeof BREAKPOINTS, number> = {
   compact: 1,
@@ -33,8 +34,10 @@ export function Pane({ padding = true, flex, fixed: _, ...props }: PaneProps) {
   const fixed = !flex && count !== 1;
 
   return (
-    <View
+    <Animated.View
       {...props}
+      entering={FadeIn.duration(200)}
+      // exiting depends on how the pane was removed
       style={[styles.flex, fixed && styles.fixed, padding && styles.margins, props.style]}
     />
   );