Sizing

Control element dimensions with width and height utilities.

Size

Sets both width and height to the same value simultaneously.

Numeric

// Before (Tailwind)
<View className="size-0" />
<View className="size-4" />
<View className="size-8" />
<View className="size-16" />
<View className="size-32" />
<View className="size-64" />
<View className="size-96" />

// After (React Native style object)
<View style={{ width: 0, height: 0 }} />
<View style={{ width: 16, height: 16 }} />
<View style={{ width: 32, height: 32 }} />
<View style={{ width: 64, height: 64 }} />
<View style={{ width: 128, height: 128 }} />
<View style={{ width: 256, height: 256 }} />
<View style={{ width: 384, height: 384 }} />

Fractional

// Before (Tailwind)
<View className="size-1/2" />
<View className="size-1/3" />
<View className="size-2/3" />
<View className="size-1/4" />
<View className="size-3/4" />
<View className="size-1/5" />

// After (React Native style object)
<View style={{ width: '50%', height: '50%' }} />
<View style={{ width: '33.333333%', height: '33.333333%' }} />
<View style={{ width: '66.666667%', height: '66.666667%' }} />
<View style={{ width: '25%', height: '25%' }} />
<View style={{ width: '75%', height: '75%' }} />
<View style={{ width: '20%', height: '20%' }} />

Special

// Before (Tailwind)
<View className="size-full" />
<View className="size-auto" />

// After (React Native style object)
<View style={{ width: '100%', height: '100%' }} />
<View style={{ width: 'auto', height: 'auto' }} />

Arbitrary

// Before (Tailwind)
<View className="size-[123px]" />
<View className="size-[200px]" />
<View className="size-[50%]" />
<View className="size-[75%]" />

// After (React Native style object)
<View style={{ width: 123, height: 123 }} />
<View style={{ width: 200, height: 200 }} />
<View style={{ width: '50%', height: '50%' }} />
<View style={{ width: '75%', height: '75%' }} />

Width

Numeric

<View className="w-0" />   // width: 0
<View className="w-4" />   // width: 16
<View className="w-8" />   // width: 32
<View className="w-16" />  // width: 64
<View className="w-32" />  // width: 128
<View className="w-64" />  // width: 256
<View className="w-96" />  // width: 384

Fractional

<View className="w-1/2" />  // width: '50%'
<View className="w-1/3" />  // width: '33.333333%'
<View className="w-2/3" />  // width: '66.666667%'
<View className="w-1/4" />  // width: '25%'
<View className="w-3/4" />  // width: '75%'
<View className="w-1/5" />  // width: '20%'

Special

<View className="w-full" />   // width: '100%'
<View className="w-screen" /> // width: window dimensions (runtime)
<View className="w-auto" />   // width: undefined

Arbitrary

<View className="w-[123px]" /> // width: 123
<View className="w-[50%]" />   // width: '50%'

Height

Numeric

<View className="h-0" />   // height: 0
<View className="h-4" />   // height: 16
<View className="h-8" />   // height: 32
<View className="h-16" />  // height: 64
<View className="h-32" />  // height: 128
<View className="h-64" />  // height: 256
<View className="h-96" />  // height: 384

Fractional

<View className="h-1/2" />  // height: '50%'
<View className="h-1/3" />  // height: '33.333333%'
<View className="h-2/3" />  // height: '66.666667%'
<View className="h-1/4" />  // height: '25%'
<View className="h-3/4" />  // height: '75%'

Special

<View className="h-full" />   // height: '100%'
<View className="h-screen" /> // height: window dimensions (runtime)
<View className="h-auto" />   // height: undefined

Arbitrary

<View className="h-[123px]" /> // height: 123
<View className="h-[80%]" />   // height: '80%'

Min Width

<View className="min-w-0" />    // minWidth: 0
<View className="min-w-16" />   // minWidth: 64
<View className="min-w-full" /> // minWidth: '100%'
<View className="min-w-[200px]" /> // minWidth: 200

Max Width

<View className="max-w-16" />   // maxWidth: 64
<View className="max-w-full" /> // maxWidth: '100%'
<View className="max-w-[400px]" /> // maxWidth: 400

Min Height

<View className="min-h-0" />    // minHeight: 0
<View className="min-h-16" />   // minHeight: 64
<View className="min-h-full" /> // minHeight: '100%'
<View className="min-h-[200px]" /> // minHeight: 200

Max Height

<View className="max-h-16" />   // maxHeight: 64
<View className="max-h-full" /> // maxHeight: '100%'
<View className="max-h-[80%]" /> // maxHeight: '80%'

Window Dimensions (w-screen / h-screen)

The w-screen and h-screen classes provide access to the actual window dimensions at runtime using React Native’s useWindowDimensions() hook.

How It Works

When you use w-screen or h-screen, the Babel plugin automatically:

1. Injects the hook: Adds const _twDimensions = useWindowDimensions(); at the top of your component
2. Imports the hook: Adds useWindowDimensions to your react-native imports
3. Generates runtime access: Creates inline styles that access _twDimensions.width or _twDimensions.height

Usage

function FullScreenModal() {
  // Hook is automatically injected - you don't need to add it!
  return (
    <View className="w-screen h-screen bg-white">
      <Text>This view fills the entire window</Text>
    </View>
  );
}

Generated Code

// Input
<View className="w-screen h-screen bg-white" />;

// Generated output
import { useWindowDimensions } from "react-native";

function Component() {
  const _twDimensions = useWindowDimensions();

  return <View style={[styles._bg_white, { width: _twDimensions.width, height: _twDimensions.height }]} />;
}

Requirements

Note

w-screen and h-screen can only be used inside function components in the className attribute. They won’t work in:

• Class components
• Nested callbacks (e.g., inside .map() or .filter())
• Global/module-level code
• With any modifiers (dark:, ios:, active:, etc.)
• In tw tagged templates or twStyle() function calls

This is because they rely on React hooks, which follow the Rules of Hooks.

Dynamic Dimensions

Unlike w-full and h-full which use percentage-based sizing, w-screen and h-screen respond to actual window dimension changes:

// w-full/h-full: 100% of parent container
<View className="w-full h-full" />

// w-screen/h-screen: actual window dimensions (updates on rotation/resize)
<View className="w-screen h-screen" />

Combining with Other Classes

You can combine screen dimensions with static utility classes only (no modifiers):

{/* ✅ Allowed: static utilities */}
<View className="w-screen h-screen bg-gray-100 p-4 items-center justify-center">
  <Text>Centered in full screen</Text>
</View>

{/* ❌ Not allowed: modifiers */}
<View className="w-screen dark:h-full" />  {/* Build error */}
<View className="w-screen ios:bg-blue-500" />  {/* Build error */}
<Pressable className="h-screen active:opacity-80" />  {/* Build error */}

Common Patterns

Full Screen

<View className="w-full h-full">
  <Text>Full screen content</Text>
</View>

Full Window (Responsive)

<View className="w-screen h-screen">
  <Text>Fills actual window - responds to rotation</Text>
</View>

Half Width

<View className="flex-row gap-2">
  <View className="w-1/2 bg-blue-500 p-4" />
  <View className="w-1/2 bg-red-500 p-4" />
</View>

Fixed Size Square

// Using separate width and height
<View className="w-16 h-16 bg-gray-200 rounded" />

// Using size shorthand (width + height)
<View className="size-16 bg-gray-200 rounded" />

Responsive Grid

<View className="flex-row flex-wrap gap-2">
  <View className="w-[48%] bg-gray-200 p-4">Item 1</View>
  <View className="w-[48%] bg-gray-200 p-4">Item 2</View>
</View>

Minimum Content Height

<View className="min-h-[200px] bg-gray-100 p-4">
  <Text>Content with minimum height</Text>
</View>

Maximum Width Container

<View className="w-full max-w-[600px] mx-auto p-4">
  <Text>Centered container with max width</Text>
</View>

Note

Arbitrary sizing supports:

• Pixel values: [123px] or [123]
• Percentages: [50%]

Other units (rem, em, vh, vw) are not supported in React Native.

Related

• Spacing - Margin and padding
• Layout - Flexbox utilities
• Aspect Ratio - Aspect ratio utilities