Can we expand AccordionList Item programmatically

[punitgrover]

For Collapse we can use isCollapsed prop to specify the state of the component if it's expanded or collapsed.

how can we pass it in head of accordianList?

[marouanekadiri]

You can use either expandedKey or expandedIndex to expand a specific element in the AccordionList.

[punitgrover]

i tried with local state to pass the expandedIndex prop but didn't work for me

                     <AccordionList
                                list={this.props.list}
                                header={this._head}
                                body={this._body}
                                expandedIndex={this.state.expandedIndex}
                            />

i am using _head element click to expand an index

_head = (item,index) =>{
return(
<TouchableOpacity onPress={()=>  {
                  console.log(`expended Index${index}`); 
                   this.setState({expandedIndex:index}) 
               }} >
               <Image style={{width:24,height:24}} source={item.url}/>
               </TouchableOpacity>);
}

can you check for any issue in this

[marouanekadiri]

You don't need to have a to use TouchableOpacity on the head. The expandedIndex is used if you want to expand on an item from the list by default. There is an onToggle prop to be used if you need to detect which item was expanded.

If you need to know which item was expanded by the user, then you just need to have it on a local state and update it via onToggle callback

[punitgrover]

That is not what i need i am writing e2e test cases by wix, which require an touchable item tap, so on that note i want a method which can expand a particular head at a given index, and that method i will call with my testID of TouchableOpacity

[marouanekadiri]

If the purpose is e2e testing you can just add testID on the image and tap on it.

[marouanekadiri]

Upgrade to version 0.3.0 there is isExpanded prop in the 3rd param of header and body also to be used.