Moved collapsible stack creating in own file

src/navigation/MainNavigator.js

@@ -11,8 +11,6 @@ import TabNavigator from "./TabNavigator";
 import TetrisScreen from "../screens/Tetris/TetrisScreen";
 import VoteScreen from "../screens/Amicale/VoteScreen";
 import LoginScreen from "../screens/Amicale/LoginScreen";
-import {useTheme} from "react-native-paper";
-import {createCollapsibleStack} from "react-navigation-collapsible";
 import {Platform} from "react-native";
 import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
 import BibScreen from "../screens/Websites/BibScreen";
@@ -30,6 +28,7 @@ import ProfileScreen from "../screens/Amicale/ProfileScreen";
 import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
+import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -41,38 +40,6 @@ const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentat
 
 const screenTransition = Platform.OS === 'ios' ? TransitionPresets.SlideFromRightIOS : TransitionPresets.ScaleFromCenterAndroid;
 
-function createScreenCollapsibleStack(
-    name: string,
-    Stack: any,
-    component: any,
-    title: string,
-    useNativeDriver?: boolean,
-    options?: { [key: string]: any }) {
-    const {colors} = useTheme();
-    const screenOptions = options != null ? options : {};
-    return createCollapsibleStack(
-        <Stack.Screen
-            name={name}
-            component={component}
-            options={{
-                title: title,
-                headerStyle: {
-                    backgroundColor: colors.surface,
-                },
-                ...screenOptions,
-            }}
-        />,
-        {
-            collapsedColor: 'transparent',
-            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
-        }
-    )
-}
-
-function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
-    return createScreenCollapsibleStack(name, Stack, component, title, false);
-}
-
 const MainStack = createStackNavigator();
 
 function MainStackComponent(props: { createTabNavigator: () => React.Node }) {

src/navigation/TabNavigator.js

@@ -21,6 +21,7 @@ import CustomTabBar from "../components/Tabbar/CustomTabBar";
 import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
 import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
+import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -30,39 +31,6 @@ const defaultScreenOptions = {
 
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
 
-function createScreenCollapsibleStack(
-    name: string,
-    Stack: any,
-    component: any,
-    title: string,
-    useNativeDriver?: boolean,
-    options?: { [key: string]: any }) {
-    const {colors} = useTheme();
-    const screenOptions = options != null ? options : {};
-    return createCollapsibleStack(
-        <Stack.Screen
-            name={name}
-            component={component}
-            options={{
-                title: title,
-                headerStyle: {
-                    backgroundColor: colors.surface,
-                },
-                ...screenOptions,
-            }}
-        />,
-        {
-            collapsedColor: 'transparent',
-            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
-        }
-    )
-}
-
-function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
-    return createScreenCollapsibleStack(name, Stack, component, title, false);
-}
-
-
 const ServicesStack = createStackNavigator();
 
 function ServicesStackComponent() {

src/utils/CollapsibleUtils.js

@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+import {useTheme} from "react-native-paper";
+import {createCollapsibleStack} from "react-navigation-collapsible";
+import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
+
+export function createScreenCollapsibleStack(
+    name: string,
+    Stack: StackNavigator,
+    component: React.Node,
+    title: string,
+    useNativeDriver?: boolean,
+    options?: StackNavigationOptions) {
+    const {colors} = useTheme();
+    const screenOptions = options != null ? options : {};
+    return createCollapsibleStack(
+        <Stack.Screen
+            name={name}
+            component={component}
+            options={{
+                title: title,
+                headerStyle: {
+                    backgroundColor: colors.surface,
+                },
+                ...screenOptions,
+            }}
+        />,
+        {
+            collapsedColor: colors.surface,
+            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
+        }
+    )
+}
+
+export function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
+    return createScreenCollapsibleStack(name, Stack, component, title, false);
+}