Nativebase: Scrollable Tabs showing weird borders at some tabs

Created on 3 Dec 2017  路  3Comments  路  Source: GeekyAnts/NativeBase

Hi there,

Unfortunately could not find a solution within your current issue tracker, so opened the one following next.

react-native, react and native-base version

"native-base": "^2.3.3",
"react": "16.0.0",
"react-native": "0.50.4"

Expected behaviour

No borders

Actual behaviour

Borders when clicking/swiping to some tabs:

image

image

Steps to reproduce (code snippet or screenshot)

Code pretty much equal to demo code, the behaviour also occurs when running the demo code:

import React, { Component } from 'react';
import { ScrollableTab, Container, Content, Footer, Header, Title, Button, Left, Right, Body, Icon, Text, Tabs, Tab } from 'native-base';

export default class HeaderExample extends Component<{}> {
  render() {
    return (
      <Container>
        <Header hasTabs>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Actueel onweer</Title>
          </Body>
          <Right />
        </Header>
        <Tabs renderTabBar={()=> <ScrollableTab />}>
          <Tab heading="Onweerradar">
            <Text>1</Text>
          </Tab>
          <Tab heading="Liveblog">
            <Text>2</Text>
          </Tab>
          <Tab heading="Waarschuwingen">
            <Text>3</Text>
          </Tab>
          <Tab heading="Informatie">
            <Text>4</Text>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

Screenshot of emulator/device

Screenshot attached above.

Is the bug present in both ios and android or in any one of them?

Android tested, iOS not tested.

Any other additional info which would help us debug the issue quicker.

Negative.

awaiting response bug
Source
picture christianversloot

Most helpful comment

@christianversloot try setting backgroundColor in tabsContainerStyle of <ScrollableTab/> to the required color for each platform.
Like

<ScrollableTab tabsContainerStyle={{ backgroundColor: platform == 'ios' ? '#F8F8F8' : '#3F51B5' }}
picture akhil-geekyants on 14 Dec 2017
👍9

All 3 comments

Any clues? @akhil-geekyants

christianversloot picture christianversloot on 13 Dec 2017

@christianversloot try setting backgroundColor in tabsContainerStyle of <ScrollableTab/> to the required color for each platform.
Like

<ScrollableTab tabsContainerStyle={{ backgroundColor: platform == 'ios' ? '#F8F8F8' : '#3F51B5' }}
akhil-geekyants picture akhil-geekyants on 14 Dec 2017
👍9

This fixes the problem, thanks 馃憤 馃槃

christianversloot picture christianversloot on 14 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kitsune7 picture kitsune7  路  3Comments
maphongba008 picture maphongba008  路  3Comments
natashache picture natashache  路  3Comments
Landerson352 picture Landerson352  路  3Comments
Bundas picture Bundas  路  3Comments