Programmatically toggle accordion

[jamesl1001]

Is there a way to programmatically toggle the accordion without having to press on the header?

I want to have the first accordion in my FlatList always open on mount, so I tried this, but it does not work:

componentDidMount() {
    if (this.props.index === 0) {
        this.setState({
            collapsed: false,
        })
    }
}

collapsed in state is successfully toggled but the accordion does not open, presumably because the internal variable show is only toggled onPress.

[marouanekadiri]

I'll work on that.

[marouanekadiri]

@jamesl1001 released in version 0.2.7.
Just use the key-based or index-based props expandedKey or expandedIndex to set the default expanded item.

[jamesl1001]

Wow thanks for the very fast turnaround @marouanekadiri!

I can see the documentation has been updated for the AccordionList component.

Does this also work for the Collapse component?

[marouanekadiri]

Hi @jamesl1001,
For Collapse you can use isCollapsed prop to specify the state of the component if it's expanded or collapsed.
By the way, I tried to clarify that in the documentation. But if you think that the documentation is poor. I highly welcome your contribution.
Thanks 😄

[jamesl1001]

Thank you @marouanekadiri! I think I just missed that prop in the docs.

I would however advise that you reverse the isCollapsed boolean. Because the word "collapsed" usually means the accordion should be closed.

[markrickert]

Thank you @marouanekadiri! I think I just missed that prop in the docs.

I would however advise that you reverse the isCollapsed boolean. Because the word "collapsed" usually means the accordion should be closed.

This bit me today as i was playing around with the component i would expect isCollapsed={false) would mean that the body is OPEN but in practice it behaves the opposite. Using isCollapsed={true) seems to open it. 🤷

[marouanekadiri]

@markrickert True, It was actually my mistake 🙈 . Now, I'm thinking about releasing a breaking change version to switch to isExpanded or to change the behavior of isCollapsed.