NativeBase: 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
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 6
- Comments: 17 (2 by maintainers)
I stopped using native-base for this purpose so i dont know if its fixed or not.
@matgsan try
prerenderingSiblingsNumber={Infinity}in <Tabs …>