From 9ed505d1dcbf8c97cd789b1bf51ef32c51e9ac18 Mon Sep 17 00:00:00 2001
From: Frederick Engelhardt
<31741411+FrederickEngelhardt@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:58:20 -0700
Subject: [PATCH 1/3] Update hiding-tabbar-in-screens with style option.md
- adds a second option using react-native styles to hide the bottom bar.
- The current example (moving the stack above the tabs) shows ideal use cases while the second option works when those ideal use cases are not an option.
---
.../version-6.x/hiding-tabbar-in-screens.md | 52 +++++++++++++++++++
1 file changed, 52 insertions(+)
diff --git a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
index 0ba0f621f36..001bd06386e 100644
--- a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
+++ b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
@@ -59,3 +59,55 @@ function App() {
```
After re-organizing the navigation structure, now if we navigate to the `Profile` or `Settings` screens, the tab bar won't be visible over the screen anymore.
+
+### Alternative Options - Hiding the bar via stylea
+
+Use cases
+1. Screens must be nested within the tabs instead of in reverse.
+2. There are multiple nested tab implementations such as a backgroundTab that deeply nested another tab.
+
+Code
+
+```js
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+ hiddenTabBar: {
+ width: 0,
+ height: 0,
+ position: 'absolute',
+ zIndex: -999, // prevents tab from clipping into view (android+ios)
+ elevation: -999, // prevents tab from clipping into view (android)
+ },
+})
+
+function HomeStack() {
+ return (
+
+
+
+
+
+ );
+}
+
+function App() {
+ /**
+ * @description this could be global state context
+ */
+ const globalStore = { bottomTabVisibility: false }
+
+ const screenOptions = useMemo(() => ({ tabBarStyle: globalStore?.bottomTabVisibility
+ ? undefined
+ : styles.hiddenTabBar}),[globalStore?.bottomTabVisibility])
+ return (
+
+
+
+
+
+
+
+ );
+}
+```
From d03a2873727d477618b27b13afae55115b65f447 Mon Sep 17 00:00:00 2001
From: Frederick Engelhardt
<31741411+FrederickEngelhardt@users.noreply.github.com>
Date: Wed, 30 Aug 2023 21:33:11 -0700
Subject: [PATCH 2/3] Update
versioned_docs/version-6.x/hiding-tabbar-in-screens.md
---
versioned_docs/version-6.x/hiding-tabbar-in-screens.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
index 001bd06386e..7f2383583aa 100644
--- a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
+++ b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
@@ -60,7 +60,7 @@ function App() {
After re-organizing the navigation structure, now if we navigate to the `Profile` or `Settings` screens, the tab bar won't be visible over the screen anymore.
-### Alternative Options - Hiding the bar via stylea
+### Alternative Options - Hiding the bar via styles
Use cases
1. Screens must be nested within the tabs instead of in reverse.
From 682327f57267c31e860cba627842b44df217f2fd Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 31 Aug 2023 04:34:11 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes
---
versioned_docs/version-6.x/hiding-tabbar-in-screens.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
index 7f2383583aa..338da78ce28 100644
--- a/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
+++ b/versioned_docs/version-6.x/hiding-tabbar-in-screens.md
@@ -63,6 +63,7 @@ After re-organizing the navigation structure, now if we navigate to the `Profile
### Alternative Options - Hiding the bar via styles
Use cases
+
1. Screens must be nested within the tabs instead of in reverse.
2. There are multiple nested tab implementations such as a backgroundTab that deeply nested another tab.