CODEWITHSUNDEEP
androidreactjsreact-nativenative-base
dhana
dhana

Reputation: 6525

How to remove the border of native-base tabs

I need to remove the border as I marked in the image.

enter image description here

I am using react-native & native-base tabs. I need to remove the bottom border of tabs.

<Tabs>
      <Tab heading="Tab1">
        <Tab1 />
      </Tab>
      <Tab heading="Tab2">
        <Tab2 />
      </Tab>
      <Tab heading="Tab3">
        <Tab3 />
      </Tab>
    </Tabs>

Upvotes: 5

Views: 5213

Answers (5)

Phuong Phan
Phuong Phan

Reputation: 147

You can try this way:

<Tabs tabContainerStyle={{ borderBottomWidth: 0 }}>

Upvotes: 4

Deano De&#39;ledge
Deano De&#39;ledge

Reputation: 1

Hi I added a borderWidth: 0px to the styling and this worked for me,

Good Luck!

Upvotes: 0

Muhammad Amir
Muhammad Amir

Reputation: 672

For everyone still trying to remove the border. This is the problem due to elevation. Add this to Tabs Tag:

<Tabs tabContainerStyle={{elevation: 0}}>
...
</Tabs>

Upvotes: 8

Harshal
Harshal

Reputation: 8308

Try:

<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}} 
/>

or

<TabHeading style={{
                backgroundColor: 'some_color',
                borderBottomWidth: 0,
}}>

or add below prop/attribute to component:

tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}

Upvotes: 1

dhana
dhana

Reputation: 6525

I found the solution,

Need to implement ScrollableTab, Then

<ScrollableTab style={{ borderWidth: 0}}>

Upvotes: 8

Related Questions