Extract children if in fragment to ensure type check is valid

Author: YoussefHenna

packages/core/src/components/SectionList/SectionList.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FlashListProps, FlashList } from "@shopify/flash-list";
 import { FlatListProps, FlatList } from "react-native";
 import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
+import { extractIfNestedInFragment } from "../../utilities";
 
 type ListComponentType = "FlatList" | "FlashList";
 
@@ -88,9 +89,10 @@ const SectionList = <T extends { [key: string]: any }>({
     }
 
     const props = element.props || {};
-    const children = React.Children.toArray(props.children).map(
-      (child) => child as React.ReactElement
+    const children = React.Children.toArray(props.children).map((child) =>
+      extractIfNestedInFragment(child as React.ReactElement)
     );
+
     if (element.type === SectionHeader) {
       return element;
     } else {

packages/core/src/components/SwipeableItem/SwipeableItem.tsx

@@ -12,6 +12,7 @@ import {
   extractBorderAndMarginStyles,
   extractEffectStyles,
   extractFlexItemStyles,
+  extractIfNestedInFragment,
   extractPositionStyles,
   extractSizeStyles,
   extractStyles,
@@ -74,7 +75,7 @@ type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
 const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
   style,
-  children,
+  children: childrenProp,
   Icon,
   closeOnPress,
   leftOpenValue,
@@ -124,9 +125,18 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   const [componentWidth, setComponentWidth] = React.useState<number | null>(
     null
   );
+
+  const children: React.ReactNode[] = React.useMemo(
+    () =>
+      React.Children.toArray(childrenProp).map((child) =>
+        extractIfNestedInFragment(child as React.ReactElement)
+      ),
+    [childrenProp]
+  );
+
   const leftSwipeButtons = React.useMemo(
     () =>
-      React.Children.toArray(children).filter(
+      children.filter(
         (child) =>
           React.isValidElement(child) &&
           child.type === SwipeableItemButton &&
@@ -137,7 +147,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
 
   const rightSwipeButtons = React.useMemo(
     () =>
-      React.Children.toArray(children).filter(
+      children.filter(
         (child) =>
           React.isValidElement(child) &&
           child.type === SwipeableItemButton &&

packages/core/src/components/TabView/TabView.tsx

@@ -12,7 +12,7 @@ import TabViewItem from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
-import { extractStyles } from "../../utilities";
+import { extractIfNestedInFragment, extractStyles } from "../../utilities";
 
 type SceneProps = SceneRendererProps & {
   route: Route;
@@ -54,20 +54,28 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   tabsBackgroundColor,
   style,
   theme,
-  children,
+  children: childrenProp,
 }) => {
   const [index, setIndex] = React.useState(0);
   const [routes, setRoutes] = React.useState<Route[]>([]);
   const [tabScenes, setTabScenes] = React.useState<{ [key: string]: any }>({});
 
   const { textStyles, viewStyles } = extractStyles(style);
 
+  const children: React.ReactNode[] = React.useMemo(
+    () =>
+      React.Children.toArray(childrenProp).map((child) =>
+        extractIfNestedInFragment(child as React.ReactElement)
+      ),
+    [childrenProp]
+  );
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
     const scenes: { [key: string]: React.ReactElement } = {};
 
-    React.Children.toArray(children)
+    children
       .filter(
         (child) => React.isValidElement(child) && child.type === TabViewItem
       )

packages/core/src/utilities.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
 import { isString, isNumber, pick, pickBy, identity } from "lodash";
 
@@ -228,3 +229,19 @@ export function getValueForRadioButton(value: string | number) {
     throw new Error(`Invalid value: ${value}`);
   }
 }
+
+export function extractIfNestedInFragment(
+  component: React.ReactElement
+): React.ReactElement {
+  if (component.type === React.Fragment) {
+    const children = React.Children.toArray(
+      (component.props as any)?.children
+    ) as React.ReactElement[];
+
+    if (children.length === 1) {
+      return children[0];
+    }
+  }
+
+  return component;
+}