Skip to main content
.id(value: string | number): Component
​
value
string | number
required
A unique identifier for this component. Used by the framework for diffing, animations, and scroll position tracking.

​
Support

​
Usage

​
Identifying items in a list

ForEach(items, (item) =>
    Text(item.name).id(item.id)
)

​
Triggering view replacement with identity changes

Changing the id value tells the framework this is a new component, triggering removal of the old one and insertion of the new one (including any transition animations). 
const body = () => {
    const [selectedTab, setSelectedTab] = useState("home")

    return Text(selectedTab)
        .id(selectedTab)
        .transition("opacity")
}

​
Scroll position tracking

Use .id() together with .scrollPosition() to track or scroll to specific children. 
const body = () => {
    const [scrollId, setScrollId] = useState(null)

    return ScrollView([
        ForEach(items, (item) =>
            Text(item.name).id(item.id)
        )
    ]).scrollPosition({ id: scrollId, setId: setScrollId })
}

​
See Also

  • tag — identifies components in selection contexts like Picker