typescript - React Natice Expo: How can I change 「BottomTab.Screen」name type alias to Japanese?

Question

Background I try first time React Native Expo with typescript. so, I have no idea to use BottomTab.Screen.

Q. I would like to change 「name="TabOne"」 to Japanese is 「ホーム」.

// navigation/BottomTabNavigator.tsx
const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="TabOne" // ホーム
        component={TabOneNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}

      />
      <BottomTab.Screen
        name="TabTwo"// タスク
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="task" color={color} />,
        }}
      />

    </BottomTab.Navigator>
  );
}

// types.tx
export type BottomTabParamList = {
  TabOne: undefined;
  TabTwo: undefined;
};

※ memo This project is React Native Expo with TypeSript.

question from:https://stackoverflow.com/questions/65886170/react-natice-expo-how-can-i-change-bottomtab-screen-name-type-alias-to-japanes

Answer 1

You need to use title or tabBarLabel to specify a title:

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="TabOne"
        component={TabOneNavigator}
        options={{
          title: 'ホーム',
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="TabTwo"
        component={TabTwoNavigator}
        options={{
          title: 'タスク',
          tabBarIcon: ({ color }) => <TabBarIcon name="task" color={color} />,
        }}
      />

    </BottomTab.Navigator>
  );
}

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarlabel