Apply margin to tabview react native

Question

Good morning peeps, I'm using react-native-tab-view in my project, but I have two issues with it.

The first issue is that I don't want the tabview width to use window dimensions, which is 100% width and 100% height.

I want a situation where I can

1. Have a header component before the tab view
2. Have some margin on the tabview to avoid the tabview using full width and full height.

Please check my code below:

const FirstRoute = () => <View style={{ flex: 1, backgroundColor: "#fff" }} />;

const SecondRoute = () => <View style={{ flex: 1, backgroundColor: "#fff" }} />;

const ThirdRoute = () => <View style={{ flex: 1, backgroundColor: "#fff" }} />;

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
  third: ThirdRoute,
});

function HomeScreen() {
  const layout = useWindowDimensions(); //Can I apply a margin here to avoid full width

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "first", title: "RETURN" },
    { key: "second", title: "ONE-WAY" },
    { key: "third", title: "MULTI-CITY" },
  ]);

  const renderTabBar = (props) => (
    <TabBar
      {...props}
      activeColor={"red"}
      inactiveColor={"grey"}
      style={{ marginTop: 25, backgroundColor: "white", borderColor: "grey" }}
    />
  );

  return (
    /** I want to have a header component here and everything wrapped in a View, but the tabview does not display when you put it in a view */
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  );
}

I'm looking for a result like the image attached:

Answer 1

Alright, I finally discovered what the challenge was. All I needed to do was put a flex:1 on the view that will be used to wrap the Tabview. Something like the below:

<View style={{ flex: 1 }}>
  <Header title="Book A Flight" />
  <View style={{ flex: 1, marginLeft: 15, marginRight: 15 }}>
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  </View>
</View>