Swiping between different tabs is smooth but the changing of tabs is very slow

Question

I am on android, and testing in my physical device. I am using react-native-scrollable-tab-view. I have two tabs inside ScrollableTabView (Following and Recommended).

<View style={styles.container}>
    <HeaderMain/>
    <ScrollableTabView
        tabBarPosition='overlayBottom'
        tabBarUnderlineColor='#2ec76e' 
        tabBarBackgroundColor='white' 
        tabBarActiveTextColor='#2ec76e'
        tabBarInactiveTextColor='#99e3b8' 
        scrollWithoutAnimation={true}
        tabBarTextStyle={{fontFamily: 'Roboto', fontSize: 15, fontWeight: 'bold'}}>
        <FollowingPostPage tabLabel="Following" />
        <RecommendedPostPage tabLabel="Recommended" />
    </ScrollableTabView>
</View>

Inside the FollowingPostPage I have a ScrollView which has list of posts (each post has a picture and some text)

export default class FollowingPostPage extends Component {
    render() {
        return(
            <ScrollView style={styles.container}>
                <PostCard/>
                <PostCard/>
                ...
                ...
                <PostCard/>
                <View style={styles.toolbar_height}/>
            </ScrollView>
        )
    }
}

Inside the RecommendedPostPage has just a text.

export default class RecommendedPostPage extends Component {
    render() {
        return(
            <View style={{flex:1, backgroundColor: '#ecf0f1'}}>
                <Text>I am from SuggestedPage!</Text>
            </View>
        )
    }
}

The swiping between the tabs is smooth. However, the changing of tabs if very slow.

If I press the Recommended tab, or if I swipe from Following to Recommended, the swiping is smooth, and also the tabs change as soon as the page changes.

However, when I am on Recommended, and press the Following tab or swipe from Recommended to Following, the swiping is very smooth, but the tab change takes a long time, as you can see the GIF from here:

How can I solve this issue? Could you please help me figure it out? Thank you.

Which version of react-native-scrollable-tab-view are you using?? I had also issues of performance in older version, but now with latest version it works smoothly. — Jagadish Upadhyay, Aug 06 '16 at 20:29
@JagadishUpadhyay Hello Jagadish. My version, react-native: 0.30.0, react-native-scrollable-tab-view: ^0.5.3. What version is yours? — Kakar, Aug 07 '16 at 15:26

score 1 · Answer 1 · answered Aug 06 '16 at 12:00

There's probably something going on when swiping back to "Recommended" that is causing the animation to "drop frames" (Read about it here: React-Native docs). I would first replace your ScrollView with a ListView as this should give you better performance

From React-Native docs

ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a ListView instead.

With the example in the docs its shows strings for rows, but you can use objects too!

ds.cloneWithRows([
    {name: 'John'},
    {name: 'Joel'},
    {name: 'James'}
]);

<ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => <Text>{rowData.name}</Text>}
/>

Hopefully this will help!

I will surely give this a try. Thank you. – Kakar Aug 07 '16 at 15:26 — Kakar, Aug 07 '16 at 15:26

Swiping between different tabs is smooth but the changing of tabs is very slow

1 Answers1