After the state is updated, view in the "react-native-collapsible(Library)" section is getting distored in React Native

Question

I am using a "react-native-collapsible" library to display collapsible sections. Each collapsible section contains the list of items, which can be deleted.

When I delete any item, the state is getting updated and the particular item is also getting removed, but it is distorting the view inside the section

Can someone please tell how can i solve this.

If I manually closes and opens the "January 23" section, the view is appearing correct.

But, I don't know how to do it using a code.

Below is the relevant code from relevant files:

App.js

const [expenses, setExpenses] = useState({}); // holds all the expenses objects 

function deleteExpenseHandler(updatedExpenses) { // updatedExpenses object comes from DeleteConfirmationModal.js
    setExpenses(updatedExpenses);
}

return (
    <>
        <View style={styles.container}>
                <View style={styles.expenseListContainer}>
                    <ExpenseList
                        months={twelveMonthsArr}
                        expenses={expenses}
                        displayDeleteConfirmaionModal={deleteConfirmaionModalVisibilityHandler} />
                </View>
            </View>
            <DeleteConfirmationModal
                expenseToDelete={expenseToDelete}
                expenses={expenses}
                visibility={deleteConfirmaionModalVisibility}
                deleteExpenseHandler={deleteExpenseHandler}
                closeModal={deleteConfirmaionModalVisibilityHandler} />
            <Toast />
    </>
);

ExpenseList.js

import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
import * as Animatable from 'react-native-animatable';


function ExpenseList(props) {
    const [activeSections, setActiveSections] = useState([]);
    const [isCollapsed, setIsCollapsed] = useState(true);

    function setSections(sections) {
        setActiveSections(sections.includes(undefined) ? [] : sections);
    }

    function renderHeader(section, isActive) {
        const contentArray = section.content;

        let totalAmount = 0;
        for (let i = 0; i < contentArray.length; i++) {
            totalAmount += Number(contentArray[i].amount);
        }


        return (
            <Animatable.View
                duration={400}
                style={[styles.header, isActive ? styles.active : styles.inactive, { flexDirection: 'row' }]}
                transition='backgroundColor'>
                <Text
                    style={[styles.headerText, { flex: 4, borderRightWidth: 2, borderRightColor: '#cccccc' }]}>
                    {section.title}
                </Text>
            </Animatable.View>
        );
    }

    function renderContent(section, isActive) {
        const contentArray = section.content;

        return (
            <Animatable.View
                duration={400}
                style={[styles.content, styles.active]}
                transition='backgroundColor'>
                {
                    contentArray.length == 0 ?
                        <Text style={styles.noExpensesText}>
                            No Expenses Present
                        </Text>
                        :
                        contentArray.map((content) => {
                            return (
                                <ExpenseItem
                                    key={content.id}
                                    id={content.id}
                                    date={content.date}
                                    displayDate={content.displayDate}
                                    month_year={content.monthName + '_' + content.year}
                                    date_month_year={content.date + '_' + content.monthName + '_' + content.year}
                                    text={content.text}
                                    icon={content.icon}
                                    amount={content.amount}
                                    displayDeleteConfirmaionModal={props.displayDeleteConfirmaionModal} />
                            );
                        })
                }
            </Animatable.View>
        );
    }

    // Final format required by 'react-native-collapsible' library  
    const finalExpensesArray = [
        {
            title: 'January 23',
            content: [
                {
                    id: '1',
                    date: '23 Dec, 23',
                    text: 'This is dummy text.',
                    amount: '150',
                },
                // .....Objects of other dates of month 'January 23'
            ],
        },
        // .....Objects of other months
    ];

    return (
        <ScrollView contentContainerStyle={{ paddingTop: 30 }}>
            <Collapsible collapsed={isCollapsed}>
                <View style={{ padding: 20, backgroundColor: '#fff' }}>
                    <Animatable.Text
                        animation={isCollapsed ? undefined : 'zoomIn'}
                        duration={300}
                        useNativeDriver>
                        {/** There was value here in the example, but don't know where it's shown. Therefore, kept it blank. */}
                    </Animatable.Text>
                </View>
            </Collapsible>
            <Accordion
                align='bottom'
                activeSections={activeSections}
                sections={finalExpensesArray}
                touchableComponent={TouchableOpacity}
                expandMultiple={false}
                renderHeader={renderHeader}
                renderContent={renderContent}
                duration={400}
                onChange={setSections}
                renderAsFlatList={false} />
        </ScrollView>
    );
}

Answer 1

I also faced this error, I solved this problem by removing style={{flex:1}} in my code in renderContent section.

Before

  renderContent={item => (
        <View style={{
          flex: 1, // I am talking about this flex:1
          backgroundColor: 'grey',
          padding: 10
        }}>
          {
            item.id === 0 && <BusinessInformation editMode={editMode} />
          }

          <View style={styles.editButtonContainer}>
            <TouchableOpacity
              onPress={() => setEditMode(!editMode)}
              style={styles.editButtonView}
            >
              <Icon source={'pencil'} size={18} />
              <Text>{editMode ? 'Save Changes' : 'Edit Details'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}

After