import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

function Jan() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function Feb() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function March() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function April() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function May() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function June() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function July() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Aug() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Sept() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Oct() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Nov() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}
function Dec() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{tabBarScrollEnabled: true}}>
        <Tab.Screen name="Jan" component={Jan} />
        <Tab.Screen name="Feb" component={Feb} />
        <Tab.Screen name="March" component={March} />
        <Tab.Screen name="April" component={April} />
        <Tab.Screen name="May" component={May} />
        <Tab.Screen name="June" component={June} />
        <Tab.Screen name="July" component={July} />
        <Tab.Screen name="Aug" component={Aug} />
        <Tab.Screen name="Sept" component={Sept} />
        <Tab.Screen name="Oct" component={Oct} />
        <Tab.Screen name="Nov" component={Nov} />
        <Tab.Screen name="Dec" component={Dec} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

This is my code which displays the same text for every. But I shouldn't use many components . So when a tab is selected, 1 text must display "This is the month of January" and so on for respective months...

Tricky part is only 1 Component must be used for 12 months ... Mean you must reuse same component and not create 12 components for each month... So text inside that single component will be dynamic based on Tab index... 0 = January, 1 = Feb.

CodePudding user response：

The below code will do your job,

import * as React from "react";
import { Text, View } from "react-native";
import { NavigationContainer, useRoute } from "@react-navigation/native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

function DynamicComponent() {
  const route = useRoute();
  const { name } = route;
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Welcome to {name}!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ tabBarScrollEnabled: true }}>
        <Tab.Screen name="Jan" component={DynamicComponent} />
        <Tab.Screen name="Feb" component={DynamicComponent} />
        <Tab.Screen name="March" component={DynamicComponent} />
        <Tab.Screen name="April" component={DynamicComponent} />
        <Tab.Screen name="May" component={DynamicComponent} />
        <Tab.Screen name="June" component={DynamicComponent} />
        <Tab.Screen name="July" component={DynamicComponent} />
        <Tab.Screen name="Aug" component={DynamicComponent} />
        <Tab.Screen name="Sept" component={DynamicComponent} />
        <Tab.Screen name="Oct" component={DynamicComponent} />
        <Tab.Screen name="Nov" component={DynamicComponent} />
        <Tab.Screen name="Dec" component={DynamicComponent} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

note: Please remove inline styles.