From b9a6c66584b215e3ee86d1808864a04aa26065c9 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 8 Nov 2024 12:21:00 +0100
Subject: [PATCH] fix: prevent error on lyrics screen when tab height is
 unavailable

---
 src/screens/Music/overlays/NowPlaying/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/screens/Music/overlays/NowPlaying/index.tsx b/src/screens/Music/overlays/NowPlaying/index.tsx
index e256dcb..9a0f37a 100644
--- a/src/screens/Music/overlays/NowPlaying/index.tsx
+++ b/src/screens/Music/overlays/NowPlaying/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { ActivityIndicator, Animated, Dimensions, Platform, Pressable, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styled, { css } from 'styled-components/native';
@@ -16,7 +16,7 @@ import { useNavigation } from '@react-navigation/native';
 import { calculateProgressTranslation } from '@/components/Progresstrack';
 import { NavigationProp } from '@/screens/types';
 import { ShadowWrapper } from '@/components/Shadow';
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const NOW_PLAYING_POPOVER_MARGIN = 6;
@@ -112,7 +112,13 @@ function NowPlaying({ offset = 0, inset }: { offset?: number, inset?: boolean })
     const { index, track } = useCurrentTrack();
     const { buffered, position } = useProgress();
     const defaultStyles = useDefaultStyles();
-    const tabBarHeight = useBottomTabBarHeight();
+
+    // The regular `useBottomTabBarHeight` hook will throw an error when it
+    // cannot find a height. Since we might use this component in places where
+    // it is unavailable, we'll just use the context directly, which will output
+    // `undefined` when it's not set.
+    const tabBarHeight = useContext(BottomTabBarHeightContext);
+
     const insets = useSafeAreaInsets();
     const previousBuffered = usePrevious(buffered);
     const previousPosition = usePrevious(position);