fix: move SceneMap outside of the component

Author: okwasniewski

apps/example/src/Examples/FourTabs.tsx

@@ -16,6 +16,13 @@ interface Props {
   activeIndicatorColor?: ColorValue;
 }
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function FourTabs({
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
@@ -53,13 +60,6 @@ export default function FourTabs({
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       sidebarAdaptable

apps/example/src/Examples/Labeled.tsx

@@ -5,6 +5,13 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function LabeledTabs({
   showLabels = true,
 }: {
@@ -36,13 +43,6 @@ export default function LabeledTabs({
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       labeled={showLabels}

apps/example/src/Examples/SFSymbols.tsx

@@ -5,6 +5,12 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Platform } from 'react-native';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+});
+
 const isAndroid = Platform.OS === 'android';
 
 export default function SFSymbols() {
@@ -38,12 +44,6 @@ export default function SFSymbols() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-  });
-
   return (
     <TabView
       sidebarAdaptable

apps/example/src/Examples/ThreeTabs.tsx

@@ -4,6 +4,12 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+});
+
 export default function ThreeTabs() {
   const [index, setIndex] = useState(1);
   const [routes] = useState([
@@ -30,12 +36,6 @@ export default function ThreeTabs() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-  });
-
   return (
     <TabView
       navigationState={{ index, routes }}

apps/example/src/Examples/TintColors.tsx

@@ -1,11 +1,17 @@
-import * as React from 'react';
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function TintColorsExample() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -38,13 +44,6 @@ export default function TintColorsExample() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       sidebarAdaptable