Got problem when switching between tabs using react-native-scrollable-tab-view

Question

I am using ScrollableTabView and I got a problem when switching between tabs. In my app, I have 3 tabs view: All, Popular, Menu. When I am in the All tab, i can see the Menu tab in the All tab.

here is the problem

this is my HomeScreen.js :

import React from 'react';
import { StyleSheet, View, Text, ImageBackground, Dimensions } from 'react-native';
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import All from '../src/components/All';
import Menu from '../src/components/Menu';
import Popular from '../src/components/Popular';

const HomeScreen = () => {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <ImageBackground
                    source={require("../src/assets/header.png")}
                    style={styles.imageBackground}
                    resizeMode="contain"
                >
                    <Text style={styles.title}>HOME</Text>
                </ImageBackground>
            </View>
            <View style={styles.tabbar}>
                <ScrollableTabView
                    initialPage={0}
                    renderTabBar={() =>
                        <DefaultTabBar underlineStyle={{ backgroundColor: 'green' }} style={{ borderWidth: 0 }} />}
                    tabBarActiveTextColor="green"
                >
                    <All tabLabel="All" />
                    <Menu tabLabel="Menu" />
                    <Popular tabLabel="Popular" />

                </ScrollableTabView>
            </View>
        </View>
    );
}

const { width } = Dimensions.get('screen');

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        marginTop: 10,
        position: 'absolute'
    },
    tabbar: {
        flex: 1,
        marginTop: width * 0.3,
        paddingHorizontal: 30,
    },
    imageBackground: {
        width: width * 0.4,
        height: width * 0.4,
        alignItems: 'center'
    },
    title: {
        color: 'white',
        marginTop: 20,
        fontWeight: 'bold',
        fontSize: 25
    }
});

export default HomeScreen;

Can somebody give me an explanation?

score 0 · Answer 1 · answered Nov 04 '20 at 09:13

0

Check your styles.tabbar:

tabbar: {
        flex: 1,
        marginTop: width * 0.3,
        paddingHorizontal: 30,
    },

You should remove paddingHorizontal from here

answered Nov 04 '20 at 09:13

Muhammad Umer Qadri

249
1
5

i want some paddingHorizontal in tabbar , how can i do it ? – alex_cheung Nov 04 '20 at 14:14
you should give it to the DefaultTabBar component's style prop instead of the complete View which is wrapping all tabs – Muhammad Umer Qadri Nov 04 '20 at 14:51
it doesn't work, i have tried set paddingHorizontal for the container View, it still not working – alex_cheung Nov 04 '20 at 15:13
Can you just remove the parent View of the ScrollableTabView component, not the main one, I am talking about the one which has the style prop styles.tabbar – Muhammad Umer Qadri Nov 04 '20 at 15:27

Got problem when switching between tabs using react-native-scrollable-tab-view

1 Answers1