GeometryReader
GeometryReader is a view that provides geometry information to its children, allowing you to create responsive layouts based on container size. GeometryReader gives you access to the size and position of the container.
GeometryReader is a view that provides geometry information to its children, allowing you to create responsive layouts based on container size. GeometryReader gives you access to the size and position of the container.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<GeometryReader>
{(geometry) => (
<VStack spacing={10}>
<Text>Width: {geometry.width}px</Text>
<Text>Height: {geometry.height}px</Text>
<Text>X: {geometry.x}px</Text>
<Text>Y: {geometry.y}px</Text>
</VStack>
)}
</GeometryReader>Responsive Layout
Preview unavailable for this example in the static docs build.
Show code
<GeometryReader>
{(geometry) => {
const isWide = geometry.width > 600
return isWide ? (
<HStack spacing={20}>
<Text>Wide Layout</Text>
<Text>Width: {geometry.width}px</Text>
</HStack>
) : (
<VStack spacing={20}>
<Text>Narrow Layout</Text>
<Text>Width: {geometry.width}px</Text>
</VStack>
)
}}
</GeometryReader>Dynamic Sizing
Preview unavailable for this example in the static docs build.
Show code
<div style={{ width: '100%', height: '300px', border: '1px solid #ccc' }}>
<GeometryReader>
{(geometry) => (
<VStack spacing={10} style={{ padding: '20px' }}>
<Text style={{ fontSize: Math.min(geometry.width / 20, 24) }}>
Responsive Font Size
</Text>
<div
style={{
width: `${Math.min(geometry.width * 0.8, 400)}px`,
height: `${Math.min(geometry.height * 0.5, 200)}px`,
backgroundColor: '#007AFF',
borderRadius: '8px',
}}
/>
<Text>Container: {geometry.width} × {geometry.height}px</Text>
</VStack>
)}
</GeometryReader>
</div>Centered Content
Preview unavailable for this example in the static docs build.
Show code
<div style={{ width: '100%', height: '400px', border: '1px solid #ccc' }}>
<GeometryReader>
{(geometry) => (
<div
style={{
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center',
}}
>
<VStack spacing={10}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>
Centered Content
</Text>
<Text>Container: {geometry.width} × {geometry.height}px</Text>
</VStack>
</div>
)}
</GeometryReader>
</div>API
| Prop | Type | Required | Description |
|---|---|---|---|
children | (geometry: IGeometry) => ReactNode | Yes | Render function that receives geometry information |
Inherits additional props from Omit<IBaseComponent, 'children'>.
Overview
GeometryReader is a view that provides geometry information to its children, allowing you to create responsive layouts based on container size. GeometryReader gives you access to the size and position of the container.
SwiftUI Correspondence: Similar to SwiftUI's GeometryReader.
Responsive Layout
Create layouts that adapt to container size:
Dynamic Sizing
Size elements based on container dimensions:
Centered Content
Center content using geometry information:
Notes
- GeometryReader provides a render prop with geometry information
- Geometry includes
width,height,x, andyproperties - GeometryReader fills its parent container
- Use GeometryReader for responsive layouts and dynamic sizing
- GeometryReader is useful for complex layout calculations
Best Practices
- Responsive design: Use GeometryReader for responsive layouts
- Performance: Avoid excessive calculations in render functions
- Layout calculations: Use geometry for dynamic sizing and positioning
- Nesting: Be careful with nested GeometryReaders
- Accessibility: Ensure responsive layouts remain accessible