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={() => (
+          <View>
             <Text style={styles.text}>
               {i18n.t('screens.clubs.categoriesFilterMessage')}
             </Text>
             <View style={styles.chipContainer}>{getCategoriesRender()}</View>
-      </AnimatedAccordion>
+          </View>
+        )}
+      />
     </Card>
   );
 }

src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx

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

src/components/Lists/PlanexGroups/GroupListAccordion.tsx

@@ -105,7 +105,7 @@ function GroupListAccordion(props: PropsType) {
         (isFavorite && !isEmptyFavorite)
       }
       enabled={!isEmptyFavorite}
-    >
+      renderItem={() => (
         <FlatList
           data={props.item.content}
           extraData={props.currentSearchString + props.favorites.length}
@@ -116,7 +116,8 @@ function GroupListAccordion(props: PropsType) {
           getItemLayout={itemLayout}
           removeClippedSubviews={true}
         />
-    </AnimatedAccordion>
+      )}
+    />
   );
 }