useBottomTabBarHeight in expo router?

[thisisgit]

Hi, I'm currently migrating an app with react-navigation to expo-router.

AFAIK expo-router uses react-navigation and I was expecting useBottomTabBarHeight to be included in expo-router package but it isn't.
So I installed @react-navigation/bottom-tabs package to use it but now it's throwing this error:

Error: Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?

My screen is wrapped with import { Tabs } from 'expo-router'; so I assumed it was already using react navigation's bottom tabs but it looks like it doesn't?

Is there any solution to use bottom tab bar's height without having to calculate it manually?
Thanks!

[sivagao]

any updates?

[marklawlor]

It's hard to provide an answer with out an example repo, as there could be multiple reasons why this isn't working. My first guess is a version mismatch between the bottom-tabs package used as a dependency of expo-router and the version you installed. Because useBottomTabsHeight gets the value from a React.context, if you have 2 versions installed the context providers don't match so it will error.

But that's just a guess, if you provide an example repo we can provide you with an exact answer.

[thisisgit]

Hi @marklawlor, I think you're right. I tried creating a new repo to reproduce this error but it worked just fine. But it didn't work on the repo that I'm working on and found out that having 2 entries of @react-navigation/bottom-tabs in yarn.lock was causing the issue:

"@react-navigation/bottom-tabs@^6.5.20":
  version "6.5.20"
  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.20.tgz#5335e75b02c527ef0569bd97d4f9185d65616e49"
  integrity sha512-ow6Z06iS4VqBO8d7FP+HsGjJLWt2xTWIvuWjpoCvsM/uQXzCRDIjBv9HaKcXbF0yTW7IMir0oDAbU5PFzEDdgA==
  dependencies:
    "@react-navigation/elements" "^1.3.30"
    color "^4.2.3"
    warn-once "^0.1.0"

"@react-navigation/bottom-tabs@~6.5.7":
  version "6.5.8"
  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.8.tgz#9536c6e45154abc183c363d07c94991e10b14856"
  integrity sha512-0aa/jXea+LyBgR5NoRNWGKw0aFhjHwCkusigMRXIrCA4kINauDcAO0w0iFbZeKfaTCVAix5kK5UxDJJ2aJpevg==
  dependencies:
    "@react-navigation/elements" "^1.3.18"
    color "^4.2.3"
    warn-once "^0.1.0"

It resulted like this when I ran yarn add @react-navigation/bottom-tabs to install the package.

Meanwhile running the same yarn add @react-navigation/bottom-tabs on new repo had following lines and worked just fine:

"@react-navigation/bottom-tabs@^6.5.20", "@react-navigation/bottom-tabs@~6.5.7":
  version "6.5.20"
  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.20.tgz#5335e75b02c527ef0569bd97d4f9185d65616e49"
  integrity sha512-ow6Z06iS4VqBO8d7FP+HsGjJLWt2xTWIvuWjpoCvsM/uQXzCRDIjBv9HaKcXbF0yTW7IMir0oDAbU5PFzEDdgA==
  dependencies:
    "@react-navigation/elements" "^1.3.30"
    color "^4.2.3"
    warn-once "^0.1.0"

I don't know why they result differently but at least found out where the cause is coming from.

And actually, there was no need to run yarn add @react-navigation/bottom-tabs at all. I thought I had to install it since it's not present in package.json but it was coming along with expo-router. So import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; just works without installing the package. My repo with the issue worked after removing the package.

But what's ideal IMO is to have this hook inside expo-router package.
Is it possible to re-export the hook from expo-router to explicitly show that the feature is supported from the package?

[Michota]

Bump!