oblador
Update redux state in Accordion renderContent not update the view
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.
Try adding flex: 1 on the Animatable.view style
adding flex: 1 to the child of renderContent props fixed that for me
