How to hide bottom navigation bar on a specific screen in react native?

by

I’ve traversed the internet like never before to find a solution for this problem as the provided solution by the docs did not work in the slightest.

I had the following navigational Set-Up:

  • Bottom Tabs
    • A (NativeStack)
      • 1 (Screen)
      • 2 (Screen)
      • 3 (Screen)
    • B (NativeStack)
    • C (NativeStack)

I wanted to hide the bottom bar in Screen 1. What finally did the trick was the following snippet in the corresponding screen:

  useEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarStyle: {
        display: "none"
      }
    });
    return () => navigation.getParent()?.setOptions({
      tabBarStyle: undefined
    });
  }, [navigation]);

The effect is run when the navigation prop updates and with that implicitly after the screen is being opened. With getParent() I get the bottom tabs navigator and can set the options with setOptions(...). To bring the bottom tabs back one has to manually set the options. I solved this by returning the method that resets the tabBarStyle in the call of useEffect(). This call is being made when it’s time to clean-up, meaning that it will run as soon as the screen is being unmounted.

May this save same of you of the desperation I had to go through.

More Related Contents:

  1. react similar JavaScript library [closed]
  2. What is component in reactjs?
  3. How to create a translucent in React Native?
  4. if-else statement inside jsx: ReactJS
  5. ReactJS: Maximum update depth exceeded error
  6. React Native: require() with Dynamic String?
  7. Adding new data to firebase users
  8. What is the difference between React Native and React?
  9. Where can I make API call with hooks in react?
  10. How to register event with useEffect hooks?
  11. What is StrictMode in React?
  12. How can I force a component to re-render with hooks in React?
  13. React Native: Getting the position of an element
  14. How do I setState for nested object?
  15. Passing props into external stylesheet in React Native?
  16. When is it appropriate to use a constructor in REACT?
  17. What is prevState in ReactJS?
  18. How to prevent re-rendering of components that have not changed?
  19. React.createClass vs. ES6 arrow function
  20. Is it an anti-pattern to define a function component inside the render() function?
  21. React Native: Using lodash debounce
  22. What is useState() in React?
  23. Navigate to screen after opening a notification?
  24. Do we still need functional setState way in react hooks?
  25. Global state in React Native
  26. How can I dispatch function in redux?
  27. Component won’t update when a redux state change occurs
  28. stop dragging after a limit has reached
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment