Write once, scale perfectly. A code-first approach to responsive design handling scaling, values, and layouts automatically.
npm install react-native-responsive-uiimport { ResponsiveView } from 'rn-responsive-ui'
export default function App() {
return (
<ResponsiveView
breakpoints={{
mobile: '100%',
tablet: '50%',
desktop: '33%'
}}
style={styles.container}
>
<Card variant="adaptive" />
</ResponsiveView>
);
}A comprehensive system designed to handle the complexity of cross-platform scaling without the boilerplate.
Automatic size adaptation based on device density and screen dimensions.
scale(16) → 20.5pxDefine values for specific breakpoints directly in your component hooks.
responsive({ m: 2, t: 4, d: 6 })Completely swap component trees for radically different form factors.
<Mobile /> | <Desktop />“I hope Expo team can create a function that can use .tablet or .mobile file name to render base on device”