naoufal / react-native-accordion

An Accordion Component for React Native
https://www.npmjs.com/package/react-native-accordion
437 stars 100 forks source link

Set style for active/expanded? #9

Open andreaslindahl opened 8 years ago

andreaslindahl commented 8 years ago

Is is possible to set different styles on the header, depending on whether the accordion is expanded or not?

Also, it is possible to only allow one accordion to be expanded at a time?

abritez commented 8 years ago

Would love to know how to do this as well

tsyirvo commented 8 years ago

It would really help me as well if we could have a props returning if the accordion is opened or closed.

tsyirvo commented 8 years ago

I'll submit a PR shortly to have a prop for the opened and closed header ;)

digitaldavenyc commented 8 years ago

@tsyirvo Did you ever get around to submitting a PR for this? Could use this feature as well.

digitaldavenyc commented 8 years ago

Could there be a way to access the is_visible variable to determine being opened or closed?

tsyirvo commented 8 years ago

@digitaldavenyc I didn't submit my PR yet :/ In the meantime, you can change {this.props.header} on line 106 by this.state.is_visible ? this.props.headerOpened : this.props.headerClosed. It will allow you to have two props for the header, one when closed and one when open ;)

digitaldavenyc commented 7 years ago

@tsyirvo I'm not sure what you mean by that method? Can u elaborate on the implementation.

btw. sorry for super delayed response

ercpereda commented 7 years ago

Change line 106 to {this.props.header({ isOpen: this.state.is_visible })}

and then you can use your component like

<Accordion
  header={({isOpen}) => <View><Text>{isOpen}</Text></View>}
  content={<View><Text>Hello World!</Text></View>}
/>