ResponsiveSwitch
ComponentA declarative component that renders different children based on the current device breakpoint (mobile vs. tablet), simplifying platform-specific UI logic.
Why use this?
Universal apps often require completely different navigation structures or layouts for phones and tablets. Instead of scattering if (isTablet) checks throughout your JSX, ResponsiveSwitch lets you clearly define platform-specific variants in a clean, readable way.
Basic Usage
Import the component and provide your mobile and tablet specific layouts as props. The library handles the detection and switching automatically.
import React from 'react';
import { ResponsiveSwitch } from 'react-native-responsive-ui';
import MobileFeed from './MobileFeed';
import TabletDashboard from './TabletDashboard';
export default function FeedScreen() {
return (
<ResponsiveSwitch
mobile={<MobileFeed showAds={true} />}
tablet={<TabletDashboard columns={3} />}
/>
);
}Component Props
Configure how your component behaves across different screen sizes.
ReactNode. Required. The component to render on phone-sized screens.
ReactNode. Optional. The component for tablet screens. Falls back to 'mobile' if unspecified.
ReactNode. Optional. For large web screens or desktop apps.
VISUAL LOGIC
Render <Mobile />Render <Tablet />Interactive Demo
// Hover over the device on the right to simulate a tablet!
const App = () => (
<ResponsiveSwitch
mobile={
<View style={styles.list}>
// Mobile: Single column list
data.map(item => <Card ... />)
</View>
}
tablet={
<View style={styles.grid}>
// Tablet: 2-column grid
data.map(item => <GridCard ... />)
</View>
}
/>
);