Changing Tabs width, not the content inside

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 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>
    );
  }
}

[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/>