ScrollableTab Bug Android

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 { 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: (
      <MainHeader goBack hasTabs title={navigation.state.params.factionsName} />
    )
  });

  render() {
    return (
      <Container>
        <Tabs
          renderTabBar={() => (
            <ScrollableTab tabsContainerStyle={styles.tabsContainerStyle} />
          )}
        >
          <Tab
            tabStyle={styles.tabStyle}
            activeTextStyle={styles.textStyle}
            textStyle={styles.textStyle}
            activeTabStyle={styles.activeTabStyle}
            heading="Seu Perfil"
          >
            <ProfileTab navigation={this.props.navigation} />
          </Tab>

          {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

[Matgsan]

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

[ARDcode]

@matgsan try prerenderingSiblingsNumber={Infinity} in <Tabs …>