Nativebase: ScrollableTab Bug Android

[Matgsan]

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases

Issue Description

The ScrollableTab is not working properly in android devices

node, npm, react-native, react and native-base version, expo version if used

Node - v9.11.1 | NPM 6.1.0 | NativeBase 2.8.0 | React: 16.5.0 | ReactNative: 0.57.0

Expected behaviour

Animation run smoothly tab by tab without stuck sometimes, change slowly, or jumping tabs.
Expected behaviour GIF

Actual behaviour

Is jumping tabs or sometimes the animation go really slow.
Actual behaviour GIF

Steps to reproduce

``` import React from "react";
import { createSelector } from "reselect";
import { Container, Tabs, Tab, ScrollableTab } from "native-base";
import { StyleSheet } from "react-native";
import { connect } from "react-redux";

import MainHeader from "@src/components/MainHeader";
import ProfileTab from "./tabs/ProfileTab";
import FactionTab from "./tabs/FactionTab";
import SkillsRankTab from "./tabs/SkillsRankTab";
import CoinsRankTab from "./tabs/CoinsRankTab";
import FactionsRankTab from "./tabs/FactionsRankTab";

class FactionsScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
header: (

)
});

render() {
return (

renderTabBar={() => (

)}
>
tabStyle={styles.tabStyle}
activeTextStyle={styles.textStyle}
textStyle={styles.textStyle}
activeTabStyle={styles.activeTabStyle}
heading="Seu Perfil"
>

      {this.props.hasFaction ? (
        <Tab
          tabStyle={styles.tabStyle}
          textStyle={styles.textStyle}
          activeTextStyle={styles.textStyle}
          activeTabStyle={styles.activeTabStyle}
          heading="Sua Facção"
        >
          <FactionTab />
        </Tab>
      ) : null}

      <Tab
        tabStyle={styles.tabStyle}
        textStyle={styles.textStyle}
        activeTextStyle={styles.textStyle}
        activeTabStyle={styles.activeTabStyle}
        heading="Rank de Habilidades"
      >
        <SkillsRankTab navigation={this.props.navigation} />
      </Tab>

      <Tab
        tabStyle={styles.tabStyle}
        textStyle={styles.textStyle}
        activeTextStyle={styles.textStyle}
        activeTabStyle={styles.activeTabStyle}
        heading="Rank de Coins"
      >
        <CoinsRankTab navigation={this.props.navigation} />
      </Tab>

      <Tab
        tabStyle={styles.tabStyle}
        textStyle={styles.textStyle}
        activeTextStyle={styles.textStyle}
        activeTabStyle={styles.activeTabStyle}
        heading="Rank de Facções"
      >
        <FactionsRankTab navigation={this.props.navigation} />
      </Tab>
    </Tabs>
  </Container>
);

}
}

const styles = StyleSheet.create({
tabsContainerStyle: {
backgroundColor: "#00a8ff"
},
tabStyle: {
backgroundColor: "#00a8ff"
},
textStyle: {
color: "white"
},
activeTabStyle: {
backgroundColor: "#00a8ff"
}
});
```

Is the bug present in both iOS and Android or in any one of them?

Android

[Cirovx]

Having the same issue, the only differences is that i am running on NPM 6.4.1
Please solve this ASAP

[jvitorr]

+1

[ARDcode]

@matgsan try prerenderingSiblingsNumber={Infinity} in

[Matgsan]

@matgsan try prerenderingSiblingsNumber={Infinity} in

Tried already. It seems to be an issue with the new ReactNative version.

[mathiscode]

+1

[leonelfaugusto]

+1

[leonelfaugusto]

Update to react-native 0.57.2 resolve the issue for me.

[mathiscode]

I can't test this solution with an app created with expo init, since the react-native version seems locked to what expo has released (currently, sdk-30.0.0) - is there another way to upgrade the react-native version in an expo app?

I tried simply installing the official npm package for react-native, rather than expo's sdk version, but it broke the project.

[mathiscode]

Update: I recreated my project with react-native 0.57.3 (without expo), and while the issue still exists, the lag is not as noticeable, and occurs less frequently.

[suvenduchhatoi]

@Matgsan
Did you try upgrading react-native to 0.57.2...
Check the ScrollableTab example from NB docs, and test on Android Emulator, it works fine, no unexpected behaviour...You should check for version compatibility among your dependencies...

[suvenduchhatoi]

Closing the issue due to no response for a while...Hope your issue has been resolved.You can reopen the issue if you still feel the issue is exclusive to "native-base"...

[mujtabaaslam93]

@Matgsan Were you able to fix it? I am having the exact same issue

[Matgsan]

I stopped using native-base for this purpose so i dont know if its fixed or not.

[seifsg]

@Matgsan what is your alternative? I'm facing this issue right now

[Matgsan]

@seifsg Man, tbh I don't remember what i did to solve it. I think I created my custom component with animations.

[sjonchhe]

I am also facing similar lags
"react": "16.11.0",
"react-native": "0.62.2",
"native-base": "^2.13.12"

[RupamShaw]

Its still very slow