Slow Transition when swiper on android. pls help me :'(

[minhphung210]

I have a tabStack that uses reactive navigation. It is structured as follows:

const AccountTab = createStackNavigator(
  {
    Account: { screen: Account },
    UserManager: { screen: UserManager },
    History: { screen: History },
    HistoryDetail: { screen: HistoryDetail },
    Point: { screen: Point }
  },
  {
    initialRouteName: "Account",
    headerMode: "none"
  }
);

const TabNav = createBottomTabNavigator(
  {
    ProductTab: {
      screen: ProductTab,
      navigationOptions: {
        title: "Sản Phẩm",
        tabBarIcon: ({ tintColor }) => (
          <Image
            resizeMode="contain"
            source={Images.productIcon}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        )
      }
    },
    SaleTab: {
      screen: SaleTab,
      navigationOptions: {
        title: "Khuyến mãi",
        tabBarIcon: ({ tintColor }) => (
          <Image
            resizeMode="contain"
            source={Images.gitfIcon}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        )
      }
    },
    HomeTab: {
      screen: HomeTab,
      navigationOptions: {
        title: "Home",
        tabBarIcon: ({ tintColor }) => (
          <Image
            resizeMode="contain"
            source={Images.homeIcon}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        )
      }
    },
    TransferTab: {
      screen: TransferTab,
      navigationOptions: {
        title: "Nhượng quyền",
        tabBarIcon: ({ tintColor }) => (
          <Image
            resizeMode="contain"
            source={Images.transferIcon}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        )
      }
    },
    AccountTab: {
      screen: AccountTab,
      navigationOptions: {
        title: "Tài khoản",
        tabBarIcon: ({ tintColor }) => (
          <Image
            resizeMode="contain"
            source={Images.accountIcon}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        )
      }
    }
  },
  {
    initialRouteName: "HomeTab",
    tabBarOptions: {
      activeTintColor: Colors.leetee,
      inactiveTintColor: Colors.charcoal,
      swipeEnabled: true
    }
  }
);

When I navigate to the "Point" screen containing the ScrollableTabView inside AccountTab , it works very well. But if I switch to another tab and navigate inside these tabs. Then go back to AccountTab and watch the delay. If I unmount the screen, then back it is fine.

here is my video demo : https://www.youtube.com/watch?v=W2oOQu-Ri5k&feature=youtu.be

and here is my code :

update : when i delete the === Platform case 'android' and lumped it with the same instances with IOS in the index.js inside the node_module / native-scrollable-tab-view. it works perfectly
I think the problem is due to ViewPagerAndroid.

Who has a better resolution?

sorry about my english :))

[hungdev]

i get same issue.

[hungdev]

@minhphung210
I know the reason. in my case, the reason is the old react native version.
My react native version is 0.54.2. After update to 0.56.0, it runs fine.
You can try update to newest react native version.

[minhphung210]

thank for reply. I will try

[phil-hodgson-1st]

Any luck with the update @minhphung210 ?

[minhphung210]

@phil-hodgson-1st I encountered a bit of error when updating version 0.56 of react-native so I decided to keep the version and fix it in the way of the above mentioned

[renandelmonico]

@minhphung210 Which version are you using?

[koo1006]

Having same same issue. Using react native "react-native": "0.57.0" . Anyone got solution?

[hungdev]

@ptomasroos why do you close this issue?

[ptomasroos]

Would be great if we could open a new issue with a repository so this is reproducable. If someone wants us to help out with this please at least provide a repository which is runnable, will make the life easier for everyone!

[ibubbo]

solution to the do?

[ibubbo]

@ptomasroos After setting this property (prerenderingSiblingsNumber={Infinity}), you can see the delay