Move accordion children in prop

src/components/Animations/AnimatedAccordion.tsx

@@ -38,7 +38,7 @@ type PropsType = {
   opened?: boolean;
   unmountWhenCollapsed?: boolean;
   enabled?: boolean;
-  children?: React.ReactNode;
+  renderItem: () => React.ReactNode;
 };
 
 function AnimatedAccordion(props: PropsType) {
@@ -96,6 +96,8 @@ function AnimatedAccordion(props: PropsType) {
 
   const toggleAccordion = () => setExpanded(!expanded);
 
+  const renderChildren =
+    !props.unmountWhenCollapsed || (props.unmountWhenCollapsed && expanded);
   return (
     <View style={props.style}>
       <List.Item
@@ -125,10 +127,7 @@ function AnimatedAccordion(props: PropsType) {
       />
       {enabled ? (
         <Collapsible collapsed={!expanded}>
-          {!props.unmountWhenCollapsed ||
+          {renderChildren ? props.renderItem() : null}
-          (props.unmountWhenCollapsed && expanded)
-            ? props.children
-            : null}
         </Collapsible>
       ) : null}
     </View>

src/components/Lists/Clubs/ClubListHeader.tsx

@@ -94,13 +94,16 @@ function ClubListHeader(props: PropsType) {
             icon="star"
           />
         )}
-        opened
+        opened={true}
-      >
+        renderItem={() => (
-        <Text style={styles.text}>
+          <View>
-          {i18n.t('screens.clubs.categoriesFilterMessage')}
+            <Text style={styles.text}>
-        </Text>
+              {i18n.t('screens.clubs.categoriesFilterMessage')}
-        <View style={styles.chipContainer}>{getCategoriesRender()}</View>
+            </Text>
-      </AnimatedAccordion>
+            <View style={styles.chipContainer}>{getCategoriesRender()}</View>
+          </View>
+        )}
+      />
     </Card>
   );
 }

src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx

@@ -84,17 +84,18 @@ function DashboardEditAccordion(props: PropsType) {
             />
           )
         }
-      >
+        renderItem={() => (
-        <FlatList
+          <FlatList
-          data={item.content}
+            data={item.content}
-          extraData={props.activeDashboard.toString()}
+            extraData={props.activeDashboard.toString()}
-          renderItem={getRenderItem}
+            renderItem={getRenderItem}
-          listKey={item.key}
+            listKey={item.key}
-          // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+            // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-          getItemLayout={getItemLayout}
+            getItemLayout={getItemLayout}
-          removeClippedSubviews
+            removeClippedSubviews={true}
-        />
+          />
-      </AnimatedAccordion>
+        )}
+      />
     </View>
   );
 }

src/components/Lists/PlanexGroups/GroupListAccordion.tsx

@@ -105,18 +105,19 @@ function GroupListAccordion(props: PropsType) {
         (isFavorite && !isEmptyFavorite)
       }
       enabled={!isEmptyFavorite}
-    >
+      renderItem={() => (
-      <FlatList
+        <FlatList
-        data={props.item.content}
+          data={props.item.content}
-        extraData={props.currentSearchString + props.favorites.length}
+          extraData={props.currentSearchString + props.favorites.length}
-        renderItem={getRenderItem}
+          renderItem={getRenderItem}
-        keyExtractor={keyExtractor}
+          keyExtractor={keyExtractor}
-        listKey={props.item.id.toString()}
+          listKey={props.item.id.toString()}
-        // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+          // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-        getItemLayout={itemLayout}
+          getItemLayout={itemLayout}
-        removeClippedSubviews={true}
+          removeClippedSubviews={true}
-      />
+        />
-    </AnimatedAccordion>
+      )}
+    />
   );
 }