From 6329ab4b080db417d5577ddc5116501ee2d921d8 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 1 Nov 2022 10:02:24 -0500
Subject: [PATCH] Improve animation jitter in main menu

---
 src/view/shell/mobile/MainMenu.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx
index 4fc9a09f..1532d5a8 100644
--- a/src/view/shell/mobile/MainMenu.tsx
+++ b/src/view/shell/mobile/MainMenu.tsx
@@ -40,7 +40,7 @@ export const MainMenu = observer(
       opacity: interpolate(initInterp.value, [0, 1.0], [0, 1.0]),
     }))
     const menuItemsAnimStyle = useAnimatedStyle(() => ({
-      marginTop: interpolate(initInterp.value, [0, 1.0], [15, 0]),
+      top: interpolate(initInterp.value, [0, 1.0], [15, 0]),
     }))
 
     // events
@@ -154,7 +154,12 @@ export const MainMenu = observer(
                 />
               </TouchableOpacity>
             </View>
-            <Animated.View style={[styles.section, menuItemsAnimStyle]}>
+            <Animated.View
+              style={[
+                styles.section,
+                styles.menuItemsAnimContainer,
+                menuItemsAnimStyle,
+              ]}>
               <View style={[styles.menuItems]}>
                 <MenuItem icon="home" label="Home" url="/" />
                 <MenuItem
@@ -217,8 +222,9 @@ const styles = StyleSheet.create({
   topSection: {
     flexDirection: 'row',
     alignItems: 'center',
+    height: 40,
     paddingHorizontal: 10,
-    paddingBottom: 10,
+    marginBottom: 10,
   },
   section: {
     paddingHorizontal: 10,
@@ -251,6 +257,9 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
 
+  menuItemsAnimContainer: {
+    position: 'relative',
+  },
   menuItems: {
     flexDirection: 'row',
     marginBottom: 20,