Nativebase: [Accordion] Callback function onOpen / onClose

[pistou]

Is there a way to set a callback function when I open or close an item in Accordion?
It would be nice to have the index of the opened/closed item and let us being able to do stuff with it.

I tried to achieve such a thing in a custom renderHeader function:

renderHeader(title, expanded) {
    return (
        <View onPress={() => console.log(expanded)}>
            <Text>{title}</Text>
        </View>
    )
}

It doesn't work: the onPress function is not triggered.
I tried to replace the <View /> by a <TouchableOpacity /> and the onPress function is triggered ; but the item doesn't expand anymore.

[renatosistemasvc]

I need it too

[josellausas]

+1

[suvenduchhatoi]

@pistou @renatosistemasvc @zunware
onPress is not a prop that can be passed to a View component...
Follow the code below for styling the index of the Accordion on open/close...

_renderHeader(title, expanded) {
    return (
      <View
        style={{
          flexDirection: "row",
          padding: 10,
          justifyContent: "space-between",
          alignItems: "center",
          backgroundColor: "#A9DAD6",
        }}

      >
        <Text style={{ fontWeight: "600" }}>header</Text>
        {expanded
          ? <Icon style={{ fontSize: 18 }} name="ios-remove-circle" />
          : <Icon style={{ fontSize: 25 }} name="ios-add-circle" />}
      </View>
    );
  }

[pistou]

@suvenduchhatoi I know <View /> doesn't trigger onPress() natively, but I tried it in case NativeBase is doing stuff under the hood with the component rendered by _renderHeader(). Since it seems we can press on the header once it is rendered, I thought we could pass a custom function to it.

I'm not trying to style my component, but to actually launch functions ; for instance I want to log that the user opened the accordion.
For now, the only way to achieve this is to track the expanded property state of each header and check if it changed which makes it very annoying to do.

That's why I though it would be great to add a callback function feature. Sorry if I was not clear.

[pistou]

If I take the sample code provided in the documentation, it would be nice to be abble to have something like this working:

<Accordion
  dataArray={dataArray}
  expanded={0}
  onItemPress={(index, item) => {
    // do whatever
  }}
  />

Where index is the index of the header pressed and item is equivalent to dataArray[index].
It would be great to also have an onOpen() and onClose() or even better onBeforeOpen(), onAfterOpen(), onBeforeClose(), onAfterClose().

[suvenduchhatoi]

38

[alanyong91]

No respond after 3 months ?

[sg28]

Need this else will have to leave the accordion from native base. very important feature for mobile development