I am using expo-router in my React Native expo app, and my files are

├── app
│   ├── (main)
│   └── _layout.js
│   └── _foo.js
│   └── _bar.js

layout.js

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen name="foo" screenOptions={{ title: "Foo" }} />
          <Tabs.Screen name="bar" screenOptions={{ title: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }

However, the 2 tab buttons showing on my iOS device have titles foo and bar instead of Foo and Bar.

What is the correct way to set the names for the tab buttons?

Also, is there a way to rearrange the order of the tab buttons? Such as showing [ Foo | Bar ] instead of [ Bar | Foo ]. Thanks!

I am using expo-router in my React Native expo app, and my files are

├── app
│   ├── (main)
│   └── _layout.js
│   └── _foo.js
│   └── _bar.js

layout.js

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen name="foo" screenOptions={{ title: "Foo" }} />
          <Tabs.Screen name="bar" screenOptions={{ title: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }

However, the 2 tab buttons showing on my iOS device have titles foo and bar instead of Foo and Bar.

What is the correct way to set the names for the tab buttons?

Also, is there a way to rearrange the order of the tab buttons? Such as showing [ Foo | Bar ] instead of [ Bar | Foo ]. Thanks!

• javascript
• reactjs
• react-native
• expo
• react-navigation

4 Answers 4

Just change screenOptions to options instead. And title to tabBarLabel

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen name="foo" options={{ tabBarLabel: "Foo" }} />
          <Tabs.Screen name="bar" options={{ tabBarLabel: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }

For icons, you can use the react-native-vector-icons library (Link for the library). Or you can follow this video.

For Title: Whatever name you will give in name prop of ponent will be displayed in tab bar. I have used these docs for the tab navigation.

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';

export default function Layout() {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, size}) => {
          let iconName;
          if (route.name === 'Foo') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Bar') {
            iconName = focused ? 'basketball' : 'basketball-outline';
          }
          return <Icon name={iconName} size={size} color={'pink'} />;
        },
        tabBarLabelStyle: {
          color: 'pink',
        },
        tabBarStyle: {
          backgroundColor: 'black',
        },
      })}>
      <Tab.Screen name="Foo" ponent={'You Component Name'} />
      <Tab.Screen name="Bar" ponent={'You Component Name'} />
    </Tab.Navigator>
  );
}

Setting the names-> use the options prop

<Tabs.Screen
  name="foo"
  options={{
    title: 'Foo'
  }}
/>

Rearrange your tabs -> simple define your tabs in the order you want them to appear

<Tabs>
  <Tabs.Screen name="foo" options={{ title: "Foo" }} />
  <Tabs.Screen name="bar" options={{ title: "Bar" }} />
</Tabs>

NB name refers to the name of your file so the file should be called foo.js

SafeAreaProvider is not needed.

Tabs.Screen options tabBarLabel and tabBarIcon. tabBarIcon has the following definition:

tabBarIcon?: ({
  focused: boolean;
  color: string;
  size: number;
}) => React.ReactNode) | undefined

Using FontAwesome as an example here, but other icon options will work here as well.

import { FontAwesome } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
  return (
    <SafeAreaProvider>
      <Tabs>
        <Tabs.Screen name="foo" options={{ tabBarLabel: "Foo", tabBarIcon: () => <FontAwesome name="home" /> }} />
        <Tabs.Screen name="bar" options={{ tabBarLabel: "Bar", tabBarIcon: () => <FontAwesome name="gear" /> }} />
      </Tabs>
    </SafeAreaProvider>
  );
}