Update redux state in Accordion renderContent not update the view

[ciolo]

Hi, I have a rendering problem with <Accordion /> in renderContent prop. I recorded the screen to clarify the problem better.

https://user-images.githubusercontent.com/21953595/167290508-9e56b8f2-002d-4072-a1e1-418ebb6fe29e.mov

I'll explain the behavior it should have: the button I clicked should decrease the quantity field (above the button) from 2 to 1 but as you can see from the video the component disappears. If I collapse the header up and then collapse it down, the component is displayed again with the right quantity updated. I use redux to manage the status of my application. Without Accordion it works great, but I would like it to work here too because it's a fanstatic component (congratulations). I have read other issues with similar behavior but have not found any solution

The code:

<Accordion
        activeSections={sections}
        sections={cartItems}
        touchableComponent={TouchableOpacity}
        renderHeader={renderHeader}
        renderContent={renderContent}
        duration={400}
        onChange={updateSections}
        renderAsFlatList={true}
/>

const renderContent = (section: AgencyCartItems, _, isActive: boolean) => {
    return (
      <Animatable.View
        duration={400}
        style={[styles.content, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor">
        {itemsRender(section.data)}
      </Animatable.View>
    );
  };

const itemsRender = (items: CartItem[]) => {
    return (
      <FlatList
        data={items}
        keyExtractor={item => `${item.dish.id}-${item.userID}`}
        renderItem={renderItem}
        showsVerticalScrollIndicator={true}
      />
    );
  };

renderItem is a simple component with nested View, Text and TouchableOpacity.

I hope I was clear.

[wahidshadab]

I have the same issue

[ciolo]

@oblador Any update?

[keremerguner]

I have the same issue :(

[MichaelAmadheo]

Try adding flex: 1 on the Animatable.view style

adding flex: 1 to the child of renderContent props fixed that for me