Core concepts
Responsive design
Using responsive variants to build adaptive layouts for any screen size.
Overview
Breakpoint variants apply a class from a window width up. They match the window, which is the screen on phones and the browser window on the web:
<View className="flex-col gap-4 md:flex-row">
<Image className="h-48 w-full rounded-lg md:h-auto md:w-48" source={{ uri }} />
<View className="flex-1">…</View>
</View>
As in Tailwind, write the mobile style unprefixed and override it at larger sizes. Use max-md: to target only below a breakpoint, min-[600px]: for one-off sizes, and portrait: or landscape: for orientation. Custom breakpoints come from --breakpoint-* theme variables.
Container queries
Mark an element with @container and style its descendants by the container's width with @sm:, @md: and so on. Containers measure their width with onLayout, so queries match from the next frame:
<View className="@container">
<View className="flex-col @md:flex-row">…</View>
</View>