0

I am using react-native scrollable tabs and native-base. Between the 2nd and 3th scrollable tabs border appeared which must not be there. I tried to add borderLeftWidth:0, marginLeft:0 in the style object but it haven't solved the trouble.Here is the image

Here is the code.

return (
      <Container style={{backgroundColor: '#494949'}}>
        <CommonHeader {...this.props} />
          <Tabs tabBarUnderlineStyle={{ backgroundColor: '#42d4f4' }}>
            <Tab tabStyle={{backgroundColor: '#EEE'}}
                 heading="Popular"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }}>
              <Articles {...this.props} />
            </Tab>
            <Tab tabStyle={{backgroundColor: '#EEE'}}
                 heading="New"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }} >
              <ArticlesNew {...this.props} />
            </Tab>
            <Tab tabStyle={{backgroundColor: '#EEE', borderLeftWidth:0,marginLeft:0}}
                 heading="Pro"
                 activeTextStyle={{ color: '#42d4f4' }}
                 activeTabStyle={{backgroundColor: '#EEE'}}
                 textStyle={{ color: 'grey' }} >
              <ProContent {...this.props} />
            </Tab>

          </Tabs>
      </Container>
    );
  }
Syuzanna
  • 509
  • 2
  • 8
  • 14

1 Answers1

1

I recently found the same problem with the NativeBase ScrollableTab component. The problem here is that the TabBar does always have it's own background color which can not be set via the NativeBase theme colors. To solve my problem i just simply hardcoded the background color as style property of the ScrollableTab component.

        <Tabs
          renderTabBar={()=> <ScrollableTab style={{backgroundColor: "#ff000" />}>
          ....
        </Tabs>

(Hope this helps you, since it is my very first post to StackOverflow :-))

FlexArts
  • 91
  • 7