diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 4d771d6..9f9683c 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -9,9 +9,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
       Object {
         "flex": 1,
       },
-      Object {
-        "backgroundColor": "#000000",
-      },
       undefined,
     ]
   }
@@ -132,6 +129,33 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         ]
       }
     >
+      <AnimatedComponent
+        pointerEvents="none"
+        style={
+          Array [
+            Object {
+              "position": "absolute",
+            },
+            Object {
+              "backgroundColor": "rgba(0, 0, 0, 0.12)",
+              "borderRadius": 48,
+              "height": 96,
+              "left": -54.666666666666664,
+              "opacity": 0.002,
+              "top": -20,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+                Object {
+                  "scale": 0.001,
+                },
+              ],
+              "width": 96,
+            },
+          ]
+        }
+      />
       <TouchableWithoutFeedback
         key="key-0"
         onPress={[Function]}
@@ -599,9 +623,6 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
       Object {
         "flex": 1,
       },
-      Object {
-        "backgroundColor": "#000000",
-      },
       undefined,
     ]
   }
@@ -783,12 +804,15 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
               "backgroundColor": undefined,
               "borderRadius": 0,
               "height": 0,
-              "left": 6,
+              "left": -4,
               "opacity": 0,
               "top": 28,
               "transform": Array [
                 Object {
-                  "scale": 0.002,
+                  "translateX": 10,
+                },
+                Object {
+                  "scale": 0.008,
                 },
               ],
               "width": 0,
@@ -805,17 +829,20 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
             },
             Object {
               "backgroundColor": "rgba(255, 255, 255, 0.12)",
-              "borderRadius": 36,
-              "height": 72,
-              "left": -30,
-              "opacity": 0,
-              "top": -8,
+              "borderRadius": 48,
+              "height": 96,
+              "left": -52,
+              "opacity": 0.002,
+              "top": -20,
               "transform": Array [
                 Object {
-                  "scale": 0.002,
+                  "translateX": 10,
+                },
+                Object {
+                  "scale": 0.001,
                 },
               ],
-              "width": 72,
+              "width": 96,
             },
           ]
         }
@@ -1374,9 +1401,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
       Object {
         "flex": 1,
       },
-      Object {
-        "backgroundColor": "#000000",
-      },
       undefined,
     ]
   }
@@ -1497,6 +1521,33 @@ exports[`renders non-shifting bottom navigation 1`] = `
         ]
       }
     >
+      <AnimatedComponent
+        pointerEvents="none"
+        style={
+          Array [
+            Object {
+              "position": "absolute",
+            },
+            Object {
+              "backgroundColor": "rgba(0, 0, 0, 0.12)",
+              "borderRadius": 48,
+              "height": 96,
+              "left": -54.666666666666664,
+              "opacity": 0.002,
+              "top": -20,
+              "transform": Array [
+                Object {
+                  "translateX": 0,
+                },
+                Object {
+                  "scale": 0.001,
+                },
+              ],
+              "width": 96,
+            },
+          ]
+        }
+      />
       <TouchableWithoutFeedback
         key="key-0"
         onPress={[Function]}
@@ -2072,9 +2123,6 @@ exports[`renders shifting bottom navigation 1`] = `
       Object {
         "flex": 1,
       },
-      Object {
-        "backgroundColor": "#000000",
-      },
       undefined,
     ]
   }
@@ -2256,12 +2304,15 @@ exports[`renders shifting bottom navigation 1`] = `
               "backgroundColor": undefined,
               "borderRadius": 0,
               "height": 0,
-              "left": 6,
+              "left": -4,
               "opacity": 0,
               "top": 28,
               "transform": Array [
                 Object {
-                  "scale": 0.002,
+                  "translateX": 10,
+                },
+                Object {
+                  "scale": 0.008,
                 },
               ],
               "width": 0,
@@ -2278,17 +2329,20 @@ exports[`renders shifting bottom navigation 1`] = `
             },
             Object {
               "backgroundColor": "rgba(255, 255, 255, 0.12)",
-              "borderRadius": 36,
-              "height": 72,
-              "left": -30,
-              "opacity": 0,
-              "top": -8,
+              "borderRadius": 48,
+              "height": 96,
+              "left": -52,
+              "opacity": 0.002,
+              "top": -20,
               "transform": Array [
                 Object {
-                  "scale": 0.002,
+                  "translateX": 10,
+                },
+                Object {
+                  "scale": 0.001,
                 },
               ],
-              "width": 72,
+              "width": 96,
             },
           ]
         }