Docs
Docs

Web Platform Support

React Native Bottom Tabs uses native platform primitives (SwiftUI on iOS and Material Design on Android) which are not available on web. For web applications, you'll need to use JavaScript-based tab implementations as a fallback.

How It Works

React Native's Metro bundler automatically resolves platform-specific files. You can create separate implementations for native platforms and web.

File Structure

src/
├── navigation/
│   ├── TabNavigator.native.tsx    # Used on iOS/Android
│   └── TabNavigator.web.tsx       # Used on web

Native Implementation

TabNavigator.native.tsx
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
import { Platform } from 'react-native';
import { HomeScreen } from '../screens/HomeScreen';
import { SettingsScreen } from '../screens/SettingsScreen';

const Tabs = createNativeBottomTabNavigator();

export function TabNavigator() {
  return (
    <Tabs.Navigator>
      <Tabs.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () =>
            Platform.OS === 'ios'
              ? { sfSymbol: 'house' }
              : require('../assets/icons/home.png'),
        }}
      />
      <Tabs.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: () =>
            Platform.OS === 'ios'
              ? { sfSymbol: 'gear' }
              : require('../assets/icons/settings.png'),
        }}
      />
    </Tabs.Navigator>
  );
}

Web Implementation

For web, install @react-navigation/bottom-tabs which provides a JavaScript-based implementation:

npm install @react-navigation/bottom-tabs
TabNavigator.web.tsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeScreen } from '../screens/HomeScreen';
import { SettingsScreen } from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator();

export function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () => require('../assets/icons/home.png'),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: () => require('../assets/icons/settings.png'),
        }}
      />
    </Tab.Navigator>
  );
}

Using in Your App

Import the component normally - React Native will automatically use the correct file:

App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { TabNavigator } from './navigation/TabNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}

Additional Resources

Need React or React Native expertise you can count on?

Let's talkLet's talk
Need to boost your app's performance?
We help React Native teams enhance speed, responsiveness, and efficiency.