Interaction & layout
LayoutGroup
Share one layout transition across a region, such as a list or a form.
Strx.LayoutGroup gives every STRX component inside it a default layout transition, without adding a layout-* token to each one. Use it when nearby components should animate size and position changes as one coordinated region.
1<Strx.LayoutGroup transition="spring" damping={16}>2 {items.map(item => (3 <Strx.View key={item.id} animate="fade-in exit:opacity-0">4 <Row item={item} />5 </Strx.View>6 ))}7</Strx.LayoutGroup>Props
| Prop | Type | Default | Meaning |
|---|---|---|---|
transition | "linear""spring" | "linear" | The layout transition descendants inherit |
duration | number | 300 | Duration in ms, for transition="linear" only |
damping | number | 15 | Spring damping, for transition="spring" |
id | string | — | Optional identifier, for debugging |
children | ReactNode | — | The region |
transition="spring" uses the same spring as layout-spring (stiffness 120, mass 1), with the damping you pass.
LayoutGroup doesn't render a view of its own; it only provides context.
Which transition wins
For any STRX component, STRX picks:
- its own
layout-*token, if it has one; - otherwise the nearest source above it: the nearest STRX ancestor with a layout transition inside the same group, or the group itself.
The nearest LayoutGroup wins over transitions inherited from STRX ancestors outside it, so a group lets you change the transition for a region:
1<Strx.View animate="layout-spring-bouncy">2 <Header /> {/* bouncy */}3 <Strx.LayoutGroup transition="linear" duration={200}>4 <List /> {/* linear, 200ms */}5 </Strx.LayoutGroup>6</Strx.View>A component with layoutPropagation="none" ignores the group too.
Patterns
Accordion
1<Strx.LayoutGroup transition="spring">2 {sections.map(section => (3 <Strx.View key={section.id} layoutClip>4 <Strx.Pressable onPress={() => toggle(section.id)}>5 <Strx.Text>{section.title}</Strx.Text>6 </Strx.Pressable>7 {openId === section.id && (8 <Strx.Text animate="fade-in exit:opacity-0">{section.body}</Strx.Text>9 )}10 </Strx.View>11 ))}12</Strx.LayoutGroup>Form with validation messages
1<Strx.LayoutGroup transition="linear" duration={180}>2 <Field label="Email" />3 {error && <Strx.Text animate="fade-in exit:opacity-0">{error}</Strx.Text>}4 <SubmitButton />5</Strx.LayoutGroup>When the error appears, the submit button slides down instead of jumping.