Render components based on the platform in React Native

In Expo, you can conditionally render components based on the platform (web or mobile) using the Platform module from react-native. Here's an example of how to load a component only for web and another only for mobile.

Excluding mobile-only components (i.e., components that are specifically designed for mobile platforms like iOS/Android) from being included in the web bundle when working with an Expo project that targets both web and mobile platforms. In such a case, conditional imports or platform-specific code splitting are essential to ensure that only web-compatible components are included in the web bundle and mobile-specific components are excluded from the web. Otherwise, trying to import mobile-specific components into the web environment can cause errors or bloated web bundles.

Source code viewer
import { Platform } from 'react-native';
 
// Conditionally import components based on the platform.
let Web;
let Mobile;
if (Platform.OS === 'web') {
  Web = require('./src/web').default;
} else {
  Mobile = require('./src/mobile').default;
}
 
export default function App() {
  return (
    <NavigationContainer>
      {Platform.OS === 'web' ? <Web /> : <Mobile />}
    </NavigationContainer>
  );
}
 
Programming Language: ECMAScript

Browse Tutorials

“Talk is cheap. Show me the code.” ― Linus Torvalds

Render components based on the platform in React Native

You are here