Tabs stop working after change in screen

[ghost]

After changing screens with material-bottom-tabs, the (top) tabs stop working. Demonstration: https://user-images.githubusercontent.com/76027477/107749238-342dda00-6d55-11eb-91ba-b0801ad45fd0.mp4

I am using version 0.3.0 with Expo, please let me know if you need more details. Any help is greatly appreciated!

[RichardLindhout]

Oh wow, thanks for your GIF. Could you maybe share the code so I can test it?

[RichardLindhout]

I'm also curious which version of react-native-viewpager it is etc.

I'm upgrading the example to try if maybe that's the case

[RichardLindhout]

I think it's related to: https://github.com/callstack/react-native-viewpager/issues/122

[ghost]

Woah, thanks for the speedy responses! Yep, it definitely seems related to the issue with react-native-viewpager.

Here are the versions I am using: react-native-paper-tabs: 0.3.0 and 0.4.0 react-native-viewpager: 4.2.2

Home.tsx:

import React from "react";
import { View } from "react-native";

import { Tabs, TabScreen } from "react-native-paper-tabs";

export default (props) => {
  return (
    <Tabs iconPosition="top">
      <TabScreen label="Recent" icon="history">
        <View />
      </TabScreen>
      <TabScreen label="Downloads" icon="folder-download">
        <View />
      </TabScreen>
      <TabScreen label="Marked" icon="book">
        <View />
      </TabScreen>
    </Tabs>
  );
};

App.tsx:

import React from "react";
import { View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { Provider } from "react-native-paper";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

import Home from "./screens/Home";

const Tab = createMaterialBottomTabNavigator();
const Tabs = () => (
  <Provider>
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={Home}
          options={{ tabBarIcon: "home", tabBarLabel: "Home" }}
        />
        <Tab.Screen
          name="Settings"
          component={View}
          options={{ tabBarIcon: "settings", tabBarLabel: "Settings" }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  </Provider>
);

export default Tabs;

[RichardLindhout]

It's hard to solve I would need a day or maybe two to dive in the native code and see why it does not work out of the box and how the measurement works

[RichardLindhout]

Maybe it works now because we updated the viewpager dependency

[ghost]

Hello! I've updated the library but the issue still seems to be recurring 😞

[RichardLindhout]

Hmmmm ok to version 0.4.1? haha you was so fast with your answer maybe it was not really upgraded yet

[ghost]

Yep, I checked node_modules and cleared my cache to make sure... will continue trying though!

[ghost]

Maybe we could patch-package the PagerView with the solution in callstack/react-native-pager-view#122? The issue has been open for over a year now

Edit: Nevermind, the code has changed a lot since then, I don't think it'd be that simple

[RichardLindhout]

Ah that would be a great solution I think! Only I don't know if it would work with expo since they don't build the native dependencies (I think?)

[samarmeena]

try PR #19 since this issue is same with switching tabs, I strongly advise to try the PR to see if the issue fixed in that.

also make sure, dependency are

react-native: ^0.64.2
react-native-pager-view: ^5.3.2

[Bi0max]

No idea, if it would help somebody, but I also had this issue. Googled quite a lot, but then installed an expo-friendly version of react-native-pager-view, which is not the latest one. npx expo install react-native-pager-view It has fixed the issue for me.

[RichardLindhout]

I only can fix this with a snack where this happens. There were a lot of upgrades in the meantime to the packages :)