Toggle (hide/show) TabBar on scrolling TabView scene contents

[nirajniroula]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-tab-view@3.0.1 for the project I'm working on.

I was trying to implement tab bar toggling on tab view scene contents scroll. Every thing went well except the space occupied by the bottom tab bar was always there. May be the GIFs below will help clarify the issue a little more.

WITH PATCHWORK

WITHOUT THE PATCH

Also, I had solved the same issue on react-native-tab-view@2.11.0 by adding height (device's height) to TabView's sceneContainerStyle prop. Something like this:

<TabView
    ...
    ...
    sceneContainerStyle={{ height: Dimensions.get("window").width }} <--- solves the issue on react-native-tab-view@2.11.0
    tabBarPosition="bottom"
    lazy={true}
    renderLazyPlaceholder={() => <LoadingOverlay />}
  />

But this approach isn't working with 3.x.x any more.
Here is the diff that solved my problem on react-native-tab-view@3.0.1:

diff --git a/node_modules/react-native-tab-view/src/TabView.tsx b/node_modules/react-native-tab-view/src/TabView.tsx
index 6b4eebb..9d70cf6 100644
--- a/node_modules/react-native-tab-view/src/TabView.tsx
+++ b/node_modules/react-native-tab-view/src/TabView.tsx
@@ -5,6 +5,7 @@ import {
   StyleProp,
   ViewStyle,
   LayoutChangeEvent,
+  Dimensions
 } from 'react-native';
 import TabBar from './TabBar';
 import SceneView from './SceneView';
@@ -17,6 +18,9 @@ import {
   PagerProps,
 } from './types';
 
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+
 export type Props<T extends Route> = PagerProps & {
   onIndexChange: (index: number) => void;
   navigationState: NavigationState<T>;
@@ -118,19 +122,22 @@ export default function TabView<T extends Route>({
                         loading
                           ? renderLazyPlaceholder({ route })
                           : renderScene({
-                              ...sceneRendererProps,
-                              route,
-                            })
+                            ...sceneRendererProps,
+                            route,
+                          })
                       }
                     </SceneView>
                   );
                 })
               )}
-              {tabBarPosition === 'bottom' &&
-                renderTabBar({
-                  ...sceneRendererProps,
-                  navigationState,
-                })}
+              {/* work around wrapper and style for bottom tab bar toggling */}
+              <View style={styles.tabBarWrapper}>
+                {tabBarPosition === 'bottom' &&
+                  renderTabBar({
+                    ...sceneRendererProps,
+                    navigationState,
+                  })}
+              </View>
             </React.Fragment>
           );
         }}
@@ -144,4 +151,11 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
+  tabBarWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: SCREEN_WIDTH,
+    backgroundColor: 'transparent'
+  }
 });

I could have overlooked into the issue. Maybe it could have been resolved with out touching the files inside the modules. If so, any such suggestions will be greatly appreciated. Otherwise, for anyone stuck with this kind of issue, you can consider it as a work around.
Also, specifically to the author(s), please do have a look at it. We hope that this issue will soon be addressed. 👍

react-native@0.63.4
react-native-pager-view@^5.2.1
react-native-tab-view@3.0.1

This issue body was partially generated by patch-package.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-tab-view (found: 2.11.0, latest: 3.0.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[nirajniroula]

Couldn't find version numbers for the following packages in the issue:

* `react-native`

* `react-native-pager-view`

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

* `react-native-tab-view` (found: `2.11.0`, latest: `3.0.1`)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Updated.