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[bot]]

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.

[satya164]

You should be able to pass a style prop to the TabBar component using renderTabBar

[nirajniroula]

My bad, passing this style as a style prop to the TabBar did the work.

{
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: SCREEN_WIDTH,
    backgroundColor: 'transparent'
  }

Thank you. No need for the patch now.

[nirajniroula]

But again, with this approach, there was another problem - the touch (on the tab bar items) doesn't work when the style of the TabBar has position: 'absolute'.

[sami-99]

@nirajniroula Hi I am trying to do the same in my app can you please show me your code to hide the tabbar.
In my app I am getting the scroll view offset to detect whether its scrolling up or down and then toggling a state on and off which I use to show the tabbar or not, but my solution is not smooth at all and not nice looking because it makes the tabbar pop in/out suddenly.
So please share with me some of your code to help me figure a better way of doing it.

[nirajniroula]

You need to wrap your TabBar with Animated.View in order to achieve the delay effect. I had done something like this;

const BottomTabBar = props => {
  const [animValue] = useState(new Animated.Value(60));

  useEffect(() => {
    let toValue = 60;
    if (tabBarVisible) {
      toValue = 0;
    }
    Animated.timing(animValue, {
      toValue,
      duration: 240,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  }, [props.tabBarVisible]);

  return (
    <Animated.View style={{ transform: [{ translateY: animValue }] }}>
      <TabBar
        {...props}
      />
    </Animated.View>
  );
};

Whats happening here is, when the visibility state of TabBar changes, the style={{ transform: [{ translateY: animValue }] }} prop of Animated.View makes it child (TabBar) change its Y position with timing (i.e. instead of hiding/showing the TabBar suddenly, it's taking 240 ms time frame to slowly transform down/up in Y axis).
You can also look for other tutorials or docs about "how Animated works in react-native" to learn more about it.
Hope it helps.

[sami-99]

Thank you so much !!