Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 209
dhana Avatar asked Jul 22 '18 16:07

dhana


2 Answers

I found the solution,

Need to implement ScrollableTab, Then

<ScrollableTab style={{ borderWidth: 0}}>
like image 86
dhana Avatar answered Oct 05 '22 14:10

dhana


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>
like image 41
Muhammad Amir Avatar answered Oct 05 '22 16:10

Muhammad Amir