marouanekadiri/accordion-collapse-react-native

React native Accordion/Collapse component, very good to use in toggles & show/hide content

accordion-collapse-react-native's Issues

How to test Collapse with jest?

Hi, i have a problem with Collapse, when i try to test the component, i didn't know how to simulate the effect, i tried with onPress and onToggle but nothing, please help me thanks

warning import

Could not find a declaration file for module 'accordion-collapse-react-native'. '/home/rodrigo/neofontes/mobile/trunk/neocorp/node_modules/accordion-collapse-react-native/build/index.js' implicitly has an 'any' type.
Try npm install @types/accordion-collapse-react-native if it exists or add a new declaration (.d.ts) file containing declare module 'accordion-collapse-react-native';ts(7016)

Can I show the collapse in flatlist?

Hi,

Can I show the collapse(simple collapse inception) component in a flatlist? How to hide the first view when tap on second view in flatlist.

Thanks in advance.

onPress event inside CollapseHeader

Is it possible to have an element inside the CollapseHeader with an onPress event?

So that if the user taps on that element it would call the onPress function, and if the user tapped anywhere else on the header it would open/close the accordion.

Doesnt work in Android

Support Long Press on CollapseHeader

Currently, this component does not support long press on CollapseHeader. It would be useful if it had a longPressHandler so that developers could add more functionality to the .

How to add animation

Is it possible to animate the opening of the box?

Any option or prop to default collapsed list

Hi,

Is there any option or prop that can be used to default list to be collapsed on load ?

Require cycle warning issue.

Hello @marouanekadiri,

In your package I'm having require cycles are allowed but can result in uninitialized values warning as single occurrence. What it might causing this warning? I hope you can reply soon. It's a bit urgent.

Thanks

Configure Accordion to only show one expanded panel at a time

Hi,

how can I configure the accordion to only show one expanded panel at a time?
Currently, multiple panels can be expanded, which is not the desired behavior I need.

Thanks,

Chris

Load more at the end of list

Hi there,

I need to implement paging in my component using this library. Please suggest.

Thanks
Sanjeev kr. sharma

Section folds up when attempt to input items on form

Issue
Collapse close when using attempt to fill any form element

How to replicate
Setup collapte -> collapseheader and collapsebody and in the body, have an element which takes input like InputField, Select, Checkbox, ... . When click on the header, it collapses, but when attemtp to fill in the form, the section folds up back up.

My sample code

<Collapse>
	<CollapseHeader>
		<FormSectionHeader text="About the house" /> 
	</CollapseHeader>
	<CollapseBody>
		<View style={ [formStyle] }>
			<SelectSection 
				onValueChange={ (val) => this.setState({ house_type_id: val  }) }
				values={ this.state.house_types }
				name="House Type" 
				placeholder="e.g. 1 month" 
				/>
		</View>
		<View style={{ flex: 1, flexDirection: 'row' }} >
			<Input extraViewStyle={ multipleInputStyle }
				onChangeText={ (val) => this.setState({  bedroom: val }) } 
				name="Bedrooms" placeholder="Bd" keyboardType = 'numeric'/>
			<Input extraViewStyle={ multipleInputStyle }
				onChangeText={ (val) => this.setState({  bathroom: val }) } 
				name="Bathroom" placeholder="Bt" keyboardType = 'numeric'/>
			<Input extraViewStyle={ multipleInputStyle }
				onChangeText={ (val) => this.setState({  kitchen : val }) } 
				name="Kitchen" placeholder="Kt" keyboardType = 'numeric'/>
			<Input extraViewStyle={ multipleInputStyle }
				onChangeText={ (val) => this.setState({  parlor : val }) } 
				name="Parlor" placeholder="Pl" keyboardType = 'numeric'/>
		</View>
	</CollapseBody>
</Collapse>

Versions

"accordion-collapse-react-native": "^0.1.6",
"react": "16.4.1",
"react-native": "0.56.0",

Can we expand AccordionList Item programmatically

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?

How to set disabled in AccordionList

Currently the prop "disabled" on header is only available in Collapse component. Is there a way to disable press action in specific item header at AccordionList?

How do I display a drop-down icon like this

changing CollapseHeader properties after expanding it

Hi, I'm new to react native and trying to make a collapsable menu!

I was wondering if there is any way to change the properties of collapseHeader and its children after it has been collapsed.
For example, say my current collapseHeader height is 100, and the font in it is 90 px. After the header is touched and the CollapseBody is showing, I want the collapseHeader height to change to 50, and the font to change to 20. Is something like this possible, and is it possible to animate the transition?

Do you want to provide a license?

I won't use the project because of the unclear license status.

How to make only one collapse open

I only want one open at a time. I've tried changing states of collapse, but nothing is working. I can open all of the items. Any thoughts?

the component disappear

while developing the app i can see the component and it works fine but when i make a release it disapears from the the app

Programmatically toggle accordion

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.

Make mutiple accordion items remain opened.

Hi

First of all, thank you for the wonderful stuff. I'm really using it well for my project.

Thing is, I want my accordion items to be remained open even if I press the other item of accordion.

Currently, If A is opened and as soon as I open B, A closes it self and only B stays opened.

I want both A and B remain opened.

Is there any possible option for this?

Thanks a ton.

Collapse on CollapseBody press

I'm having this structure of AccordeonItem, but i cannot make it collapse on pressing CollapseBody

<StyledCollapse isExpanded={isExpanded} onToggle={(changedIsExpanded) => setIsExpanded(changedIsExpanded)}>
      <CollapseHeader>
        <Text>Title</Text>
      </CollapseHeader>
      <CollapseBody>
           <Text>Description</Text>
      </CollapseBody>
</StyledCollapse>

I've tried
<CollapseBody onToggle={(changedIsExpanded) => setIsExpanded(changedIsExpanded)}>
and
<CollapseBody onPress={(changedIsExpanded) => setIsExpanded(changedIsExpanded)}>

but no action.
Any suggestions?

How to add animation?

Defaule expandedKey is not working / collapse, expand has issue with record at 0 index?

I have 2 records.

Issue 1:
If I set first to be opened by default like this, it does not work for index 0.

It works for index 1.

  const [activeItem, setActiveItem] = useState(0);
 <AccordionList
          expandedKey={activeItem}
          expandedIndex={activeItem}
          onToggle={(item, index) => setActiveItem(item)}
          list={FAQSections}
          header={_head}
          body={_body}
        />

Issue 2.
I click on first record header, it expands.
Now I click on second record header, it expands second and closes first one.
Now I click on first one again and it closes second one but does not expand the first.
I have to click twice to expand first one at this point.

Please help with these 2 issues.
Thanks

How to differentiate different collapse?

Hi,

How can we differentiate between a number of collapse and to know whether a specified collapse is collapsed or not?

Thanks

Nested collapsible headers

Is it possible to do nested collapsible headers?
In example
Header << can collapse
SubHeader << can collapse
Body

does not install

The module doesn't install. It shows following error
node_modules/react-native-safe-area-view
npm ERR! code EISGIT
node_modules/react-native-safe-area-view: Appears to be a git repo or submodule.
node_modules/react-native-safe-area-view npm ERR! git Refusing to remove it. Update manually,

Support Typescript

I work in react native typescript project, and this package is no longer supported by typescript,
how can i use it in react native typescript project ?
thank you

how can i use activeopacity in this dependency i want to hide animation

Having issue with scrolling of whole accordian view

I am having issue as of accordian view is scrolling

AccordionList - scrollToIndex

Hi,
how can I use scrollToIndex method in AccordionList?
I get the next error when try to use ref in the component:

ExceptionsManager.js:126 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwar

     <AccordionList
        style={styles.listCategories}
        list={this.state.categories}
        header={this._renderHeader}
        body={this._renderBody}
        scrollEnabled={false}
        keyExtractor={(item, index) => item.categoryId.toString()}
        disabled={this.state.products === null ? true : false}
        **ref={(ref) => { this.flatListRef = ref }}**
        getItemLayout={this._getItemLayout}
     />

Thanks,

How to use Swipeable in AccordionList ?

Hi,

I would like to use Swipeable from 'react-native-gesture-handler' in the head of AccordionList.

I tried to simply add it :

header={_head}

function _head() {

return(

            <View>

                <Swipeable
                    renderRightActions={() => RightActions()}
                >

                    <Text>Text</Text>

                </Swipeable>
            </View>

        );
}

It seems not working because only the dropdown function is fire when we swipe. Is there a way to do that?

Thanks for your anwser.

Uses deprecated event `componentWillReceiveProps`

It uses deprecated event componentWillReceiveProps, can you please update the code to use componentDidUpdate

Ios Crashing

My app crashes without any logging error after I upgrade Expo sdk from 43 to 44.

Trying to require 'react-native' in project files, there are several files providing this module

I added this library via npm install. It appears that within the node_modules folder of this library, it requires 'react-native'. It conflicts with all files in my RN project that require xxxxxxx from 'react-native'.

Perhaps remove that from the node_modules folder and it will no longer throw this error?

Thanks.

add support for hooks

I would like to create separate components with CollapseHeader and CollapsedBody, without the need to do dirty props, I think hooks improve the experience and would make the code cleaner.

example without hook:

// parent component should have a useState to dirty props
function Header({ title, isExpanded }: Props) {
  return (
    <CollapseHeader>
      <TitleHeader>
        <Title>{title}</Title>
        <Feather name={isExpanded ? 'chevron-down' : 'chevron-up'} size={15} color='#fff' />
      </TitleHeader>
    </CollapseHeader>
  );
}

function Example() {
  const [isExpanded, setExpanded] = React.useState(true);

  return (
    <Collapse isExpanded={isExpanded} onToggle={() => setExpanded(!isExpanded)}>
      <Header title="Hello" isExpanded={isExpanded} />
      { /* ... */ }
    </Collapse>
  );
}

example with hook:

function Header({ title }: Props) {
  const { isExpanded } = useCollapse();

  return (
    <CollapseHeader>
      <TitleHeader>
        <Title>{title}</Title>
        <Feather name={isExpanded ? 'chevron-down' : 'chevron-up'} size={15} color='#fff' />
      </TitleHeader>
    </CollapseHeader>
  );
}

function Example() {
  return (
    <Collapse>
      <Header title="Hello" />
      { /* ... */ }
    </Collapse>
  );
}

Need a property to check whether the component is collapsed or not

@marouanekadiri Need a property to check whether the component is collapsed or not.

Change CollapseHeader text if isCollapse is True

Hello Guys ... I want to change the text within the when toggled .. here is my code

<Collapse
                        onToggle={(isCollapsed) => {
                            console.log(isCollapsed);
                            if (isCollapsed) {
                                this.setState({collapseHeaderText: 'Hide Order Detail'})
                            }
                        }}>
                    >
                        <CollapseHeader>
                            <View>
                                <Text style={myOrdersStyles.orderItemDetailsHeaderText}>{this.state.collapseHeaderText}</Text>
                            </View>
                        </CollapseHeader>
                        <CollapseBody>
                            {this.renderOrderItemDetails(orders)}
                        </CollapseBody>
                    </Collapse>

there is a state collapseHeaderText with a default value 'View Order Detail"

How do I display a drop-down icon up/down based on collapse

Thanks for this control.

With respect to this question:
#22

I am also using accordion. Here is my code:

 <AccordionList
          expandedKey={0}
          onToggle={(item, index) => _clicked(item, index)}
          list={FAQSections}
          header={_head}
          body={_body}
        />

  function _head(item) {
    return (
      <View
        style={[
          theme.marginTop30,
          theme.marginBottom15]}>
        <View style={[theme.flexDirectionRow,
        theme.justifyContentSpaceBetween,]}>
          <Text style={[styles.notificationTitle]}>{item.title}</Text>
          {toggle ?
            <Ionicons
              name="ios-arrow-down"
              size={20}
              color='#922B21'
            /> :
            <Ionicons
              name="ios-arrow-up"
              size={20}
              color='#922B21'
            />
          }

        </View>
      </View>
    )
  }


  function _body(item, b, c) {
    // console.log(item, b, c)
    return (
      <View>
        <Text style={{ paddingTop: 5, paddingBottom: 5 }}>
          {item.description}
        </Text>
      </View>
    )
  }

  function _clicked(item, index) {
    console.log(item, index);
    setToggle(!toggle)
  }

1. how to get which item was expanded right now?
2. how to change up / down arrow for clicked item only?

Currently it icon changes for all items when any one clicked.
Thanks

How to set activeOpacity?

Not collapsing when Debug JS Remotely

Not collapsing when Debug JS Remotely

first child of header isExpanded is not changing when clicked

const _head = (item , index , isExpanded) => {
return(
<CollapseHeader style={{ marginVertical:5, borderWidth:1, flexDirection:'row',
paddingHorizontal:5, borderRadius:5, borderColor:global.BtnColor , paddingVertical:5 ,flexDirection:'row'}}>
<View style={{ width:'90%',}}>

       <Text style={{fontFamily:'roboto',fontSize:18, color:colors.text, fontWeight:'700' }}>{item.heading}</Text> 
           
    
  </View>
  <Icon
     size={30}
     color= {colors.text}
     name={ isExpanded ? 'ios-arrow-down': 'ios-arrow-up'}
     style={{alignSelf:'center'}}
   />
    </CollapseHeader>
    
    );
  } 

<AccordionList
disabled = {true}
isCollapsed = {true}
bounces={false}
//onToggle={(item, index , isExpanded) => onToggle_covered(item, index , isExpanded)}
list={myhtml}
header={_head}
body={_body}
/>

How to know if current item is expanded or collapsed in AccordianList?

I am able to show up and down arrow and change them when item is clicked.

Up and down arrows change only works when I hit different items.

If I click on same item, it expands and collapse but how do I know if its expanded or collapsed at the moment?
Thanks

   <AccordionList
          expandedIndex={0}
          onToggle={(item, index) => _onClick(item, index)}
          list={filteredFAQSections}
          header={_head}
          body={_body}
        />

ERESOLVE unable to resolve dependency tree

When you try to install accordion-collapse-react-native using the latest react-native it fails because of a dependency with react 16. The latests app template uses react-17.

Output when installing

PS C:\Users\User\Yo> npm install --save accordion-collapse-react-native
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined      
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR!   react-native@"https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.61.5" from [email protected]
npm ERR! node_modules/accordion-collapse-react-native
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\User\AppData\Local\npm-cache\eresolve-report.txt for a full report.   

i could use --force to install it but I think the correct solution would be for this repository to update it's package json and change this:

"peerDependencies": {
    "react": "^16.0",
    "react-native": ">=0.57"
  },

To something like this:

 "peerDependencies": {
    "react": "~16.8.6 || ~16.9.0 || ~16.11.0 || ~16.13.1 || ~17.0.1",
    "react-native": "^0.60.6 || ^0.61.5 || ^0.62.2 || ^0.63.2 || ^0.64.0 || 1000.0.0"
  },

How to disable touch toggle option on header?

How to disable touch toggle option on header?

How to expand CollapseBody only when button click in CollapseHeader

Hi,

I have one text and one touchable opacity button in my CollapseHeader.
How do I expand CollapseBody only when user pressed the touchable button instead of tap header and body expand automatically?

Thank you.

Clarification or apprach needed

Am not seeing an issue at this point. But need help to achieve the below things,

1. whenever the user taps on the Collapse header (or Header in Accordion), I need to update one of the UI elements in the header in addition to show the body. Example collapse/expand arrow to be updated
2. Whenever the user taps on any of the headers and expands a particular cell, ALl other cells should get collapsed.

It would be great if I get answers to these.

Thanks !!!

Accdoesn't display?