Restructure how TabView children are rendered (#791)

Author: YoussefHenna

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

@@ -62,40 +62,34 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 }) => {
   const [index, setIndex] = React.useState(initialTabIndex);
   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(
     () =>
       flattenReactFragments(
         React.Children.toArray(childrenProp) as React.ReactElement[]
+      ).filter(
+        (child) => React.isValidElement(child) && child.type === TabViewItem
       ),
     [childrenProp]
   );
 
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
-    const scenes: { [key: string]: React.ReactElement } = {};
 
-    children
-      .filter(
-        (child) => React.isValidElement(child) && child.type === TabViewItem
-      )
-      .forEach((item: any, idx) => {
-        const child = item as React.ReactElement;
-        newRoutes.push({
-          key: idx.toString(),
-          title: child.props.title,
-          icon: child.props.icon,
-          accessibilityLabel: child.props.accessibilityLabel,
-        });
-        scenes[idx] = child;
+    children.forEach((item: any, idx) => {
+      const child = item as React.ReactElement;
+      newRoutes.push({
+        key: idx.toString(),
+        title: child.props.title,
+        icon: child.props.icon,
+        accessibilityLabel: child.props.accessibilityLabel,
       });
+    });
 
     setRoutes(newRoutes);
-    setTabScenes(scenes);
   }, [children]);
 
   const indexChangeHandler = (i: number) => {
@@ -131,7 +125,8 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   };
 
   const renderScene = ({ route }: SceneProps) => {
-    return tabScenes[route.key];
+    const index = Number(route.key);
+    return children[index];
   };
 
   //Cannot render TabView without at least one tab