I am creating a <tabBar /> in the React Native expo app. I have three pages as my tabs which are mentioned below.

library: "react-native-tab-view": "^4.0.5",

const tabs = [
    {
      key: "AllContestTab",
      title: "All Contest",
      component: () => <AllContestTab />,
    },
    {
      key: "MyContestTab",
      title: "My Contest",
      component: () => <MyContestTab />,
    },
    {
      key: "TeamsTab",
      title: "Teams",
      component: () => <TeamsTab />,
    },
  ];

I have used this code to render my this three pages.

const DynamicTabBar = ({ tabs }) => {
  const [index, setIndex] = useState(0);

  // Custom renderScene function using a switch case
  const renderScene = ({ route }) => {
    switch (route.key) {
      case "AllContestTab":
        return <AllContestTab />;
      case "MyContestTab":
        return <MyContestTab />;
      case "TeamsTab":
        return <TeamsTab />;
      default:
        return null;
    }
  };

  return (
    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
  );
};

However, using this screen, all the contents of my pages are rendered on top of each other, and when I click on other tabs, my content is not visible.

and it's looking like this:

Code for three pages:

const AllContestTab = () => {
  console.log("************ FIRST SCREEN *********");
  return (
    <View>
          <Text>First Tab</Text>
        </View>
  );
};

const MyContestTab = () => {
  console.log("************ Second SCREEN *********");
  return (
    <View>
      <Text>Second Tab</Text>
    </View>
  );
};

const TeamsTab = () => {
  console.log("************ Third SCREEN *********");
  return (
    <View>
      <Text> Third Tab</Text>
    </View>
  );
};

How can I fix this?

Thank you for your help in advance.

I am creating a <tabBar /> in the React Native expo app. I have three pages as my tabs which are mentioned below.

library: "react-native-tab-view": "^4.0.5",

const tabs = [
    {
      key: "AllContestTab",
      title: "All Contest",
      component: () => <AllContestTab />,
    },
    {
      key: "MyContestTab",
      title: "My Contest",
      component: () => <MyContestTab />,
    },
    {
      key: "TeamsTab",
      title: "Teams",
      component: () => <TeamsTab />,
    },
  ];

I have used this code to render my this three pages.

const DynamicTabBar = ({ tabs }) => {
  const [index, setIndex] = useState(0);

  // Custom renderScene function using a switch case
  const renderScene = ({ route }) => {
    switch (route.key) {
      case "AllContestTab":
        return <AllContestTab />;
      case "MyContestTab":
        return <MyContestTab />;
      case "TeamsTab":
        return <TeamsTab />;
      default:
        return null;
    }
  };

  return (
    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />
  );
};

However, using this screen, all the contents of my pages are rendered on top of each other, and when I click on other tabs, my content is not visible.

and it's looking like this:

Code for three pages:

const AllContestTab = () => {
  console.log("************ FIRST SCREEN *********");
  return (
    <View>
          <Text>First Tab</Text>
        </View>
  );
};

const MyContestTab = () => {
  console.log("************ Second SCREEN *********");
  return (
    <View>
      <Text>Second Tab</Text>
    </View>
  );
};

const TeamsTab = () => {
  console.log("************ Third SCREEN *********");
  return (
    <View>
      <Text> Third Tab</Text>
    </View>
  );
};

How can I fix this?

Thank you for your help in advance.

• reactjs
• react-native
• tabbar
• tabview
• react-native-tab-view

1 Answer 1

The renderScene function you're using is not compatible with the TabView. It requires that renderScene return a valid React component based on the route parameter, and it expects each tab to have unique components managed correctly. Your code renders all components simultaneously, causing them to overlap.

So, get your components together

const AllContestTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>First Tab</Text>
  </View>
);

const MyContestTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Second Tab</Text>
  </View>
);

const TeamsTab = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Third Tab</Text>
  </View>
);

const initialLayout = { width: Dimensions.get("window").width };

const tabs = [
  { key: "AllContestTab", title: "All Contest" },
  { key: "MyContestTab", title: "My Contest" },
  { key: "TeamsTab", title: "Teams" },
];

Then, create your DynamicTabBar and scene map your tabs

  const renderScene = SceneMap({
    AllContestTab: AllContestTab,
    MyContestTab: MyContestTab,
    TeamsTab: TeamsTab,
  });

And use it

    <TabView
      navigationState={{ index, routes: tabs }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      renderTabBar={(props) => (
        <TabBar
          {...props}
          indicatorStyle={{
            backgroundColor: "#243642",
            height: 4,
            borderTopLeftRadius: 10,
            borderTopRightRadius: 10,
          }}
          style={{
            backgroundColor: "#FFFFFF",
            borderBottomWidth: 1,
            borderBottomColor: "#243642",
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 5,
            elevation: 5,
          }}
          tabStyle={{
            paddingVertical: Platform.OS === "ios" ? 14 : 10,
          }}
          labelStyle={{
            fontSize: 16,
            fontWeight: "bold",
            color: "#387478",
          }}
          activeColor="#243642"
          inactiveColor="#387478"
        />
      )}
    />