Changing Tabs width, not the content inside

[rsokz]

I want to customize the Tabs width, but not the width of the content of each tab.

I want the width of the Tabs header to not affect the width of the content inside each Tab.

This is my code. Currently I'm adding a style to Tabs

<Tabs
	style={{
		width: PixelRatio.getPixelSizeForLayoutSize(101),
	}}
	initialPage={0}
	tabBarUnderlineStyle={ styles.tabBarUnderlineStyle }
	>
        <Tab
	        heading="Phone"
	        tabStyle={ styles.tabStyle }
	        activeTabStyle={ styles.tabStyle }
	        textStyle={ styles.tabBarText }
	        activeTextStyle={ styles.tabBarText }
	        >
	        <Content>
		       
	        </Content>
	</Tab>
	<Tab
		heading="Email"
		tabStyle={ styles.tabStyle }
		activeTabStyle={ styles.tabStyle }
		textStyle={ styles.tabBarText }
		activeTextStyle={ styles.tabBarText }
		>
	        {/* <Tab2 /> */}
	</Tab>
</Tabs>

[akhil-ga]

@rostyys try this using scrollable tabs http://docs.nativebase.io/Components.html#tabs-scrollable-headref.

[SupriyaKalghatgi]

@rostyys Did you try?

[rsokz]

@akhil-geekyants @SupriyaKalghatgi Yes, I tried it. In addition, I'm being forced to insert a height for the Tabs in order for the tab content to show up. is this normal behavior?

[akhil-ga]

@rostyys try removing flex:0 from Tabs' style

Gif

[rsokz]

@akhil-geekyants Thank you! This fixes the height issue but it still doesn't solve my original issue. Is it possible to only give a width to the top header? I don't want the content inside each Tab to be limited to the same width because then it causes problems with seeing shadows on the TextInputs (Cuts if off on the left and right) as seen in my original photo

[akhil-ga]

@rostyys try setting width to ScrollableTab.
like

<ScrollableTab style={{ width: 200 }} />

This sets the tab bar width. To change the width of each tab apply width to tabStyle and activeTabStyle props of <Tab/>

[SupriyaKalghatgi]

@rostyys Did you try?

[SupriyaKalghatgi]

Closing this tomorrow in case of no response

[rsokz]

@akhil-geekyants @SupriyaKalghatgi Hi! Just tried. This fixed the width of the content of each tab!

But scrollable tabs seem to shift the tab titles to the right? How can I center them like they were before? I also don't want them to actually be scrollable.

[akhil-ga]

@rostyys try setting the tabs container width using tabsContainerStyle

Gif

Sample code

import React, { Component } from 'react';
import { Dimensions } from "react-native";
import { Container, Header, Tab, Tabs, ScrollableTab, Text } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Tabs
          renderTabBar={() =>
            <ScrollableTab style={{
              width: 300,
              marginHorizontal: Dimensions.get("window").width / 11,
              paddingTop: Dimensions.get("window").width / 35
            }}
              tabsContainerStyle={{ width: 300 }} />}>
          <Tab heading="Tab1" tabStyle={{ width: 100 }} activeTabStyle={{ width: 100 }} tab>
            <Text style={{ flex: 1, backgroundColor: "red" }}>Tab one</Text>
          </Tab>
          <Tab heading="Tab2" tabStyle={{ width: 100 }} activeTabStyle={{ width: 100 }}>
            <Text style={{ flex: 1, backgroundColor: "blue" }}>Tab two</Text>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}