CODEWITHSUNDEEP
native-base
Yossi
Yossi

Reputation: 6027

native base Tabs - any idea how to remove the border around the tabs?

The following screenshot is the result of the code that is provided below. Any idea how the border around the tabs can be removed?

enter image description here

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Container, Header, Title, Text, Tabs, Tab } from 'native-base';

export default class Settings extends React.Component {
  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Container
          style={{ flex: 1, backgroundColor: '#fff', marginTop: 30 }}>
          <Header hasTabs transparent>
              <Title style={{ color: 'grey' }}>
                Settings
              </Title>
          </Header>

          <Tabs tabBarUnderlineStyle={{ backgroundColor: 'blue', height: 1 }}>
            <Tab heading="Tab1"
              tabStyle={{ backgroundColor: 'white' }}
              textStyle={{ color: 'grey' }}
              activeTabStyle={{ backgroundColor: 'white' }}
              activeTextStyle={{ color: 'blue' }}>
              <Text>TODO: Tab1</Text>
            </Tab>

            <Tab heading="Tab2"
              tabStyle={{ backgroundColor: 'white' }}
              textStyle={{ color: 'grey' }}
              activeTabStyle={{ backgroundColor: 'white' }}
              activeTextStyle={{ color: 'blue' }}>
              <Text>TODO: Tab2</Text>
            </Tab>
          </Tabs>

        </Container>
      </SafeAreaView>
    );
  }
}

Upvotes: 3

Views: 1850

Answers (2)

Stefan
Stefan

Reputation: 701

Adding tabContainerStyle={{ elevation: 0 }} to the <Tabs> solves this issue. It seems to be Elevation (shadows) and not Border

Upvotes: 4

RegularGuy
RegularGuy

Reputation: 3686

This can´t be done with the default tabs component, there is a workaround using scrollable tabs, and if you want to do it modifying the source code , there's this workaround also

Upvotes: 2

Related Questions