diff --git a/src/components/Collapsible/CollapsibleComponent.js b/src/components/Collapsible/CollapsibleComponent.js
new file mode 100644
index 0000000..d982b6a
--- /dev/null
+++ b/src/components/Collapsible/CollapsibleComponent.js
@@ -0,0 +1,51 @@
+// @flow
+
+import * as React from 'react';
+import {withCollapsible} from "../../utils/withCollapsible";
+import {Collapsible} from "react-navigation-collapsible";
+import CustomTabBar from "../Tabbar/CustomTabBar";
+
+export type CollapsibleComponentProps = {
+    children?: React.Node,
+    hasTab?: boolean,
+    onScroll?: (event: SyntheticEvent<EventTarget>) => void,
+};
+
+type Props = {
+    ...CollapsibleComponentProps,
+    collapsibleStack: Collapsible,
+    component: any,
+}
+
+class CollapsibleComponent extends React.Component<Props> {
+
+    static defaultProps = {
+        hasTab: false,
+    }
+
+    onScroll = (event: SyntheticEvent<EventTarget>) => {
+        if (this.props.onScroll)
+            this.props.onScroll(event);
+    }
+
+    render() {
+        const Comp = this.props.component;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
+        return (
+            <Comp
+                {...this.props}
+                onScroll={onScrollWithListener(this.onScroll)}
+                contentContainerStyle={{
+                    paddingTop: containerPaddingTop,
+                    paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
+                    minHeight: '100%'
+                }}
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+            >
+                {this.props.children}
+            </Comp>
+        );
+    }
+}
+
+export default withCollapsible(CollapsibleComponent);
diff --git a/src/components/Collapsible/CollapsibleFlatList.js b/src/components/Collapsible/CollapsibleFlatList.js
new file mode 100644
index 0000000..398688b
--- /dev/null
+++ b/src/components/Collapsible/CollapsibleFlatList.js
@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import {Animated} from "react-native";
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import CollapsibleComponent from "./CollapsibleComponent";
+
+type Props = {
+    ...CollapsibleComponentProps
+}
+
+class CollapsibleFlatList extends React.Component<Props> {
+
+    render() {
+        return (
+            <CollapsibleComponent
+                {...this.props}
+                component={Animated.FlatList}
+            >
+                {this.props.children}
+            </CollapsibleComponent>
+        );
+    }
+}
+
+export default CollapsibleFlatList;
diff --git a/src/components/Collapsible/CollapsibleScrollView.js b/src/components/Collapsible/CollapsibleScrollView.js
new file mode 100644
index 0000000..831e925
--- /dev/null
+++ b/src/components/Collapsible/CollapsibleScrollView.js
@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import {Animated} from "react-native";
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import CollapsibleComponent from "./CollapsibleComponent";
+
+type Props = {
+    ...CollapsibleComponentProps
+}
+
+class CollapsibleScrollView extends React.Component<Props> {
+
+    render() {
+        return (
+            <CollapsibleComponent
+                {...this.props}
+                component={Animated.ScrollView}
+            >
+                {this.props.children}
+            </CollapsibleComponent>
+        );
+    }
+}
+
+export default CollapsibleScrollView;
diff --git a/src/components/Collapsible/CollapsibleSectionList.js b/src/components/Collapsible/CollapsibleSectionList.js
new file mode 100644
index 0000000..cb8f6f0
--- /dev/null
+++ b/src/components/Collapsible/CollapsibleSectionList.js
@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import {Animated} from "react-native";
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
+import CollapsibleComponent from "./CollapsibleComponent";
+
+type Props = {
+    ...CollapsibleComponentProps
+}
+
+class CollapsibleSectionList extends React.Component<Props> {
+
+    render() {
+        return (
+            <CollapsibleComponent
+                {...this.props}
+                component={Animated.SectionList}
+            >
+                {this.props.children}
+            </CollapsibleComponent>
+        );
+    }
+}
+
+export default CollapsibleSectionList;
diff --git a/src/components/Screens/WebSectionList.js b/src/components/Screens/WebSectionList.js
index 7b8f9d2..4f41bfa 100644
--- a/src/components/Screens/WebSectionList.js
+++ b/src/components/Screens/WebSectionList.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {ERROR_TYPE, readData} from "../../utils/WebData";
 import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
-import {Animated, RefreshControl, View} from "react-native";
+import {RefreshControl, View} from "react-native";
 import ErrorView from "./ErrorView";
 import BasicLoadingScreen from "./BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
@@ -12,6 +12,7 @@ import * as Animatable from 'react-native-animatable';
 import CustomTabBar from "../Tabbar/CustomTabBar";
 import {Collapsible} from "react-navigation-collapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -203,10 +204,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
         if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
             dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
         }
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
+        const {containerPaddingTop} = this.props.collapsibleStack;
         return (
             <View>
-                <Animated.SectionList
+                <CollapsibleSectionList
                     sections={dataset}
                     extraData={this.props.updateData}
                     refreshControl={
@@ -231,14 +232,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
                             onRefresh={this.onRefresh}/>
                     }
                     getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
-                    // Animations
-                    onScroll={onScrollWithListener(this.onScroll)}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
-                        minHeight: '100%'
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                    onScroll={this.onScroll}
+                    hasTab={true}
                 />
                 <Snackbar
                     visible={this.state.snackbarVisible}
diff --git a/src/navigation/MainNavigator.js b/src/navigation/MainNavigator.js
index 8a21a8c..3207960 100644
--- a/src/navigation/MainNavigator.js
+++ b/src/navigation/MainNavigator.js
@@ -28,16 +28,13 @@ import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScree
 import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
 import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
 import GameStartScreen from "../screens/Game/screens/GameStartScreen";
-import GameEndScreen from "../screens/Game/screens/GameEndScreen";
 
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
 
-const screenTransition = TransitionPresets.SlideFromRightIOS;
-
 const defaultScreenOptions = {
     gestureEnabled: true,
     cardOverlayEnabled: true,
-    ...screenTransition,
+    ...TransitionPresets.SlideFromRightIOS,
 };
 
 
@@ -58,48 +55,37 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                     title: i18n.t('screens.home.title'),
                 }}
             />
-            <MainStack.Screen
-                name="settings"
-                component={SettingsScreen}
-                options={{
-                    title: i18n.t('screens.settings.title'),
-                }}
-            />
-            <MainStack.Screen
-                name="dashboard-edit"
-                component={DashboardEditScreen}
-                options={{
-                    title: i18n.t('screens.settings.dashboardEdit.title'),
-                }}
-            />
-            <MainStack.Screen
-                name="about"
-                component={AboutScreen}
-                options={{
-                    title: i18n.t('screens.about.title'),
-                }}
-            />
-            <MainStack.Screen
-                name="dependencies"
-                component={AboutDependenciesScreen}
-                options={{
-                    title: i18n.t('screens.about.libs')
-                }}
-            />
-            <MainStack.Screen
-                name="debug"
-                component={DebugScreen}
-                options={{
-                    title: i18n.t('screens.about.debug')
-                }}
-            />
-            <MainStack.Screen
-                name="game-start"
-                component={GameStartScreen}
-                options={{
-                    title: i18n.t("screens.game.title"),
-                }}
-            />
+            {createScreenCollapsibleStack(
+                "settings",
+                MainStack,
+                SettingsScreen,
+                i18n.t('screens.settings.title'))}
+            {createScreenCollapsibleStack(
+                "dashboard-edit",
+                MainStack,
+                DashboardEditScreen,
+                i18n.t('screens.settings.dashboardEdit.title'))}
+            {createScreenCollapsibleStack(
+                "about",
+                MainStack,
+                AboutScreen,
+                i18n.t('screens.about.title'))}
+            {createScreenCollapsibleStack(
+                "dependencies",
+                MainStack,
+                AboutDependenciesScreen,
+                i18n.t('screens.about.libs'))}
+            {createScreenCollapsibleStack(
+                "debug",
+                MainStack,
+                DebugScreen,
+                i18n.t('screens.about.debug'))}
+
+            {createScreenCollapsibleStack(
+                "game-start",
+                MainStack,
+                GameStartScreen,
+                i18n.t('screens.game.title'))}
             <MainStack.Screen
                 name="game-main"
                 component={GameMainScreen}
@@ -107,73 +93,91 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                     title: i18n.t("screens.game.title"),
                 }}
             />
-            <MainStack.Screen
-                name="game-end"
-                component={GameEndScreen}
-                options={{
-                    title: i18n.t("screens.game.title"),
-                }}
-            />
-            {createScreenCollapsibleStack("login", MainStack, LoginScreen, i18n.t('screens.login.title'),
-                true, {headerTintColor: "#fff"}, 'transparent')}
+            {createScreenCollapsibleStack(
+                "login",
+                MainStack,
+                LoginScreen,
+                i18n.t('screens.login.title'),
+                true,
+                {headerTintColor: "#fff"},
+                'transparent')}
             {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
 
 
-            {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menu.title'))}
-            {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo.title'))}
+            {createScreenCollapsibleStack(
+                "self-menu",
+                MainStack,
+                SelfMenuScreen,
+                i18n.t('screens.menu.title'))}
+            {createScreenCollapsibleStack(
+                "proximo",
+                MainStack,
+                ProximoMainScreen,
+                i18n.t('screens.proximo.title'))}
             {createScreenCollapsibleStack(
                 "proximo-list",
                 MainStack,
                 ProximoListScreen,
                 i18n.t('screens.proximo.articleList'),
-                true,
-                {...screenTransition},
             )}
-            <MainStack.Screen
-                name="proximo-about"
-                component={ProximoAboutScreen}
-                options={{
-                    title: i18n.t('screens.proximo.title'),
-                    ...modalTransition,
-                }}
-            />
+            {createScreenCollapsibleStack(
+                "proximo-about",
+                MainStack,
+                ProximoAboutScreen,
+                i18n.t('screens.proximo.title'),
+                true,
+                {...modalTransition},
+            )}
 
-            {createScreenCollapsibleStack("profile", MainStack, ProfileScreen, i18n.t('screens.profile.title'))}
-            {createScreenCollapsibleStack("club-list", MainStack, ClubListScreen, i18n.t('screens.clubs.title'))}
-            {createScreenCollapsibleStack("equipment-list", MainStack, EquipmentScreen, i18n.t('screens.equipment.title'))}
-            {createScreenCollapsibleStack("equipment-rent", MainStack, EquipmentLendScreen, i18n.t('screens.equipment.book'))}
-            {createScreenCollapsibleStack("equipment-confirm", MainStack, EquipmentConfirmScreen, i18n.t('screens.equipment.confirm'))}
-            <MainStack.Screen
-                name="club-information"
-                component={ClubDisplayScreen}
-                options={{
-                    title: i18n.t('screens.clubs.details'),
-                    ...modalTransition,
-                }}
-            />
-            <MainStack.Screen
-                name="club-about"
-                component={ClubAboutScreen}
-                options={{
-                    title: i18n.t('screens.clubs.title'),
-                    ...modalTransition,
-                }}
-            />
-            <MainStack.Screen
-                name="vote"
-                component={VoteScreen}
-                options={{
-                    title: i18n.t('screens.vote.title'),
-                }}
-            />
-
-            <MainStack.Screen
-                name="feedback"
-                component={BugReportScreen}
-                options={{
-                    title: i18n.t('screens.feedback.title'),
-                }}
-            />
+            {createScreenCollapsibleStack(
+                "profile",
+                MainStack,
+                ProfileScreen,
+                i18n.t('screens.profile.title'))}
+            {createScreenCollapsibleStack(
+                "club-list",
+                MainStack,
+                ClubListScreen,
+                i18n.t('screens.clubs.title'))}
+            {createScreenCollapsibleStack(
+                "club-information",
+                MainStack,
+                ClubDisplayScreen,
+                i18n.t('screens.clubs.details'),
+                true,
+                {...modalTransition})}
+            {createScreenCollapsibleStack(
+                "club-about",
+                MainStack,
+                ClubAboutScreen,
+                i18n.t('screens.clubs.title'),
+                true,
+                {...modalTransition})}
+            {createScreenCollapsibleStack(
+                "equipment-list",
+                MainStack,
+                EquipmentScreen,
+                i18n.t('screens.equipment.title'))}
+            {createScreenCollapsibleStack(
+                "equipment-rent",
+                MainStack,
+                EquipmentLendScreen,
+                i18n.t('screens.equipment.book'))}
+            {createScreenCollapsibleStack(
+                "equipment-confirm",
+                MainStack,
+                EquipmentConfirmScreen,
+                i18n.t('screens.equipment.confirm'))}
+            {createScreenCollapsibleStack(
+                "vote",
+                MainStack,
+                VoteScreen,
+                i18n.t('screens.vote.title'))}
+            {createScreenCollapsibleStack(
+                "feedback",
+                MainStack,
+                BugReportScreen,
+                i18n.t('screens.feedback.title'))}
         </MainStack.Navigator>
     );
 }
diff --git a/src/screens/About/AboutDependenciesScreen.js b/src/screens/About/AboutDependenciesScreen.js
index 9c21693..4cb7c6e 100644
--- a/src/screens/About/AboutDependenciesScreen.js
+++ b/src/screens/About/AboutDependenciesScreen.js
@@ -1,10 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList} from "react-native";
 import packageJson from '../../../package';
 import {List} from 'react-native-paper';
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
+import {View} from "react-native-animatable";
 
 type listItem = {
     name: string,
@@ -59,14 +60,16 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
 
     render() {
         return (
-            <FlatList
-                data={this.data}
-                keyExtractor={this.keyExtractor}
-                renderItem={this.renderItem}
-                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                removeClippedSubviews={true}
-                getItemLayout={this.itemLayout}
-            />
+            <View>
+                <CollapsibleFlatList
+                    data={this.data}
+                    keyExtractor={this.keyExtractor}
+                    renderItem={this.renderItem}
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                    removeClippedSubviews={true}
+                    getItemLayout={this.itemLayout}
+                />
+            </View>
         );
     }
 }
diff --git a/src/screens/About/AboutScreen.js b/src/screens/About/AboutScreen.js
index 9e89bd2..20867f2 100644
--- a/src/screens/About/AboutScreen.js
+++ b/src/screens/About/AboutScreen.js
@@ -6,6 +6,7 @@ import i18n from "i18n-js";
 import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
 import packageJson from "../../../package.json";
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 type ListItem = {
     onPressCallback: () => void,
@@ -338,7 +339,7 @@ class AboutScreen extends React.Component<Props> {
 
     render() {
         return (
-            <FlatList
+            <CollapsibleFlatList
                 style={{padding: 5}}
                 data={this.dataOrder}
                 renderItem={this.getMainCard}
diff --git a/src/screens/About/DebugScreen.js b/src/screens/About/DebugScreen.js
index f1a0453..546b2ee 100644
--- a/src/screens/About/DebugScreen.js
+++ b/src/screens/About/DebugScreen.js
@@ -1,13 +1,14 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, View} from "react-native";
+import {View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import CustomModal from "../../components/Overrides/CustomModal";
 import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
 import {StackNavigationProp} from "@react-navigation/stack";
 import {Modalize} from "react-native-modalize";
 import type {CustomTheme} from "../../managers/ThemeManager";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 type PreferenceItem = {
     key: string,
@@ -168,7 +169,7 @@ class DebugScreen extends React.Component<Props, State> {
                     {this.getModalContent()}
                 </CustomModal>
                 {/*$FlowFixMe*/}
-                <FlatList
+                <CollapsibleFlatList
                     data={this.state.currentPreferences}
                     extraData={this.state.currentPreferences}
                     renderItem={this.renderItem}
diff --git a/src/screens/Amicale/AmicaleContactScreen.js b/src/screens/Amicale/AmicaleContactScreen.js
index f2398f2..a5cf607 100644
--- a/src/screens/Amicale/AmicaleContactScreen.js
+++ b/src/screens/Amicale/AmicaleContactScreen.js
@@ -1,16 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, Image, Linking, View} from 'react-native';
+import {FlatList, Image, Linking, View} from 'react-native';
 import {Card, List, Text, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import {Collapsible} from "react-navigation-collapsible";
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
-import {withCollapsible} from "../../utils/withCollapsible";
 import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
-    collapsibleStack: Collapsible
 };
 
 type DatasetItem = {
@@ -130,22 +127,14 @@ class AmicaleContactScreen extends React.Component<Props> {
     };
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
-            <Animated.FlatList
+            <CollapsibleFlatList
                 data={[{key: "1"}]}
                 renderItem={this.getScreen}
-                // Animations
-                onScroll={onScroll}
-                contentContainerStyle={{
-                    paddingTop: containerPaddingTop,
-                    paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
-                    minHeight: '100%'
-                }}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                hasTab={true}
             />
         );
     }
 }
 
-export default withCollapsible(withTheme(AmicaleContactScreen));
+export default withTheme(AmicaleContactScreen);
diff --git a/src/screens/Amicale/Clubs/ClubAboutScreen.js b/src/screens/Amicale/Clubs/ClubAboutScreen.js
index db1cc36..825f220 100644
--- a/src/screens/Amicale/Clubs/ClubAboutScreen.js
+++ b/src/screens/Amicale/Clubs/ClubAboutScreen.js
@@ -1,10 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Image, ScrollView, View} from 'react-native';
+import {Image, View} from 'react-native';
 import {Card, List, Text, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
 import Autolink from "react-native-autolink";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {};
 
@@ -14,7 +15,7 @@ class ClubAboutScreen extends React.Component<Props> {
 
     render() {
         return (
-            <ScrollView style={{padding: 5}}>
+            <CollapsibleScrollView style={{padding: 5}}>
                 <View style={{
                     width: '100%',
                     height: 100,
@@ -43,7 +44,7 @@ class ClubAboutScreen extends React.Component<Props> {
                         />
                     </Card.Content>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }
diff --git a/src/screens/Amicale/Clubs/ClubDisplayScreen.js b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
index bc77065..773c2b0 100644
--- a/src/screens/Amicale/Clubs/ClubDisplayScreen.js
+++ b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Linking, ScrollView, View} from 'react-native';
+import {Linking, View} from 'react-native';
 import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
 import ImageModal from 'react-native-image-modal';
 import i18n from "i18n-js";
@@ -12,6 +12,7 @@ import type {category, club} from "./ClubListScreen";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import {StackNavigationProp} from "@react-navigation/stack";
 import {ERROR_TYPE} from "../../../utils/WebData";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -184,7 +185,10 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         }
         if (data != null) {
             return (
-                <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
+                <CollapsibleScrollView
+                    style={{paddingLeft: 5, paddingRight: 5}}
+                    hasTab={true}
+                >
                     {this.getCategoriesRender(data.category)}
                     {data.logo !== null ?
                         <View style={{
@@ -214,7 +218,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                         </Card.Content>
                         : <View/>}
                     {this.getManagersRender(data.responsibles, data.email)}
-                </ScrollView>
+                </CollapsibleScrollView>
             );
         } else
             return null;
diff --git a/src/screens/Amicale/Clubs/ClubListScreen.js b/src/screens/Amicale/Clubs/ClubListScreen.js
index 04f8287..31364cb 100644
--- a/src/screens/Amicale/Clubs/ClubListScreen.js
+++ b/src/screens/Amicale/Clubs/ClubListScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Platform} from "react-native";
+import {Platform} from "react-native";
 import {Searchbar} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@@ -9,10 +9,9 @@ import ClubListItem from "../../../components/Lists/Clubs/ClubListItem";
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
 import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
-import {withCollapsible} from "../../../utils/withCollapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
-import {Collapsible} from "react-navigation-collapsible";
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
 
 export type category = {
     id: number,
@@ -32,7 +31,6 @@ export type club = {
 type Props = {
     navigation: StackNavigationProp,
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -111,9 +109,8 @@ class ClubListScreen extends React.Component<Props, State> {
             clubList = data[0].clubs;
         }
         this.categories = categoryList;
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
-            <Animated.FlatList
+            <CollapsibleFlatList
                 data={clubList}
                 keyExtractor={this.keyExtractor}
                 renderItem={this.getRenderItem}
@@ -121,10 +118,6 @@ class ClubListScreen extends React.Component<Props, State> {
                 // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
                 removeClippedSubviews={true}
                 getItemLayout={this.itemLayout}
-                // Animations
-                onScroll={onScroll}
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
             />
         )
     };
@@ -241,4 +234,4 @@ class ClubListScreen extends React.Component<Props, State> {
     }
 }
 
-export default withCollapsible(ClubListScreen);
+export default ClubListScreen;
diff --git a/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js b/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
index a6cc067..ecccf39 100644
--- a/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
@@ -2,14 +2,13 @@
 
 import * as React from 'react';
 import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
-import {Collapsible} from "react-navigation-collapsible";
-import {withCollapsible} from "../../../utils/withCollapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import type {Device} from "./EquipmentListScreen";
-import {Animated, View} from "react-native";
+import {View} from "react-native";
 import i18n from "i18n-js";
 import {getRelativeDateString} from "../../../utils/EquipmentBooking";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -20,7 +19,6 @@ type Props = {
         },
     },
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 
@@ -44,21 +42,13 @@ class EquipmentConfirmScreen extends React.Component<Props> {
     }
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         const item = this.item;
         const dates = this.dates;
         if (item != null && dates != null) {
             const start = new Date(dates[0]);
             const end = new Date(dates[1]);
             return (
-                <Animated.ScrollView
-                    // Animations
-                    onScroll={onScroll}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                        minHeight: '100%'
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
+                <CollapsibleScrollView>
                     <Card style={{margin: 5}}>
                         <Card.Content>
                             <View style={{flex: 1}}>
@@ -103,7 +93,7 @@ class EquipmentConfirmScreen extends React.Component<Props> {
                             </Paragraph>
                         </Card.Content>
                     </Card>
-                </Animated.ScrollView>
+                </CollapsibleScrollView>
             );
         } else
             return null;
@@ -112,4 +102,4 @@ class EquipmentConfirmScreen extends React.Component<Props> {
 
 }
 
-export default withCollapsible(withTheme(EquipmentConfirmScreen));
+export default withTheme(EquipmentConfirmScreen);
diff --git a/src/screens/Amicale/Equipment/EquipmentListScreen.js b/src/screens/Amicale/Equipment/EquipmentListScreen.js
index f0ea799..676701b 100644
--- a/src/screens/Amicale/Equipment/EquipmentListScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentListScreen.js
@@ -1,11 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, View} from "react-native";
+import {View} from "react-native";
 import {Button, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
-import {Collapsible} from "react-navigation-collapsible";
-import {withCollapsible} from "../../../utils/withCollapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import i18n from "i18n-js";
@@ -14,11 +12,11 @@ import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentList
 import MascotPopup from "../../../components/Mascot/MascotPopup";
 import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
     navigation: StackNavigationProp,
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -29,7 +27,7 @@ export type Device = {
     id: number,
     name: string,
     caution: number,
-    booked_at: Array<{begin: string, end: string}>,
+    booked_at: Array<{ begin: string, end: string }>,
 };
 
 export type RentedDevice = {
@@ -133,20 +131,12 @@ class EquipmentListScreen extends React.Component<Props, State> {
             if (fetchedData != null)
                 this.userRents = fetchedData["locations"];
         }
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
-            <Animated.FlatList
+            <CollapsibleFlatList
                 keyExtractor={this.keyExtractor}
                 renderItem={this.getRenderItem}
                 ListHeaderComponent={this.getListHeader()}
                 data={this.data}
-                // Animations
-                onScroll={onScroll}
-                contentContainerStyle={{
-                    paddingTop: containerPaddingTop,
-                    minHeight: '100%'
-                }}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
             />
         )
     };
@@ -203,4 +193,4 @@ class EquipmentListScreen extends React.Component<Props, State> {
     }
 }
 
-export default withCollapsible(withTheme(EquipmentListScreen));
+export default withTheme(EquipmentListScreen);
diff --git a/src/screens/Amicale/Equipment/EquipmentRentScreen.js b/src/screens/Amicale/Equipment/EquipmentRentScreen.js
index 452ccd1..b94b030 100644
--- a/src/screens/Amicale/Equipment/EquipmentRentScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentRentScreen.js
@@ -2,12 +2,10 @@
 
 import * as React from 'react';
 import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
-import {Collapsible} from "react-navigation-collapsible";
-import {withCollapsible} from "../../../utils/withCollapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import type {Device} from "./EquipmentListScreen";
-import {Animated, BackHandler, View} from "react-native";
+import {BackHandler, View} from "react-native";
 import * as Animatable from "react-native-animatable";
 import i18n from "i18n-js";
 import {CalendarList} from "react-native-calendars";
@@ -22,6 +20,7 @@ import {
     isEquipmentAvailable
 } from "../../../utils/EquipmentBooking";
 import ConnectionManager from "../../../managers/ConnectionManager";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -31,7 +30,6 @@ type Props = {
         },
     },
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -269,8 +267,6 @@ class EquipmentRentScreen extends React.Component<Props, State> {
     }
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
-
         const item = this.item;
         const start = this.getBookStartDate();
         const end = this.getBookEndDate();
@@ -280,14 +276,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
             const firstAvailability = getFirstEquipmentAvailability(item);
             return (
                 <View style={{flex: 1}}>
-                    <Animated.ScrollView
-                        // Animations
-                        onScroll={onScroll}
-                        contentContainerStyle={{
-                            paddingTop: containerPaddingTop,
-                            minHeight: '100%'
-                        }}
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
+                    <CollapsibleScrollView>
                         <Card style={{margin: 5}}>
                             <Card.Content>
                                 <View style={{flex: 1}}>
@@ -396,7 +385,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
                             }}
                             style={{marginBottom: 50}}
                         />
-                    </Animated.ScrollView>
+                    </CollapsibleScrollView>
                     <LoadingConfirmDialog
                         visible={this.state.dialogVisible}
                         onDismiss={this.onDialogDismiss}
@@ -449,4 +438,4 @@ class EquipmentRentScreen extends React.Component<Props, State> {
 
 }
 
-export default withCollapsible(withTheme(EquipmentRentScreen));
+export default withTheme(EquipmentRentScreen);
diff --git a/src/screens/Amicale/LoginScreen.js b/src/screens/Amicale/LoginScreen.js
index 25325fc..611da24 100644
--- a/src/screens/Amicale/LoginScreen.js
+++ b/src/screens/Amicale/LoginScreen.js
@@ -1,13 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
+import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
 import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager from "../../managers/ConnectionManager";
 import i18n from 'i18n-js';
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
-import {withCollapsible} from "../../utils/withCollapsible";
-import {Collapsible} from "react-navigation-collapsible";
 import type {CustomTheme} from "../../managers/ThemeManager";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {StackNavigationProp} from "@react-navigation/stack";
@@ -15,11 +13,11 @@ import AvailableWebsites from "../../constants/AvailableWebsites";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import LinearGradient from "react-native-linear-gradient";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
     route: { params: { nextScreen: string } },
-    collapsibleStack: Collapsible,
     theme: CustomTheme
 }
 
@@ -56,7 +54,6 @@ class LoginScreen extends React.Component<Props, State> {
     onEmailChange: (value: string) => null;
     onPasswordChange: (value: string) => null;
     passwordInputRef: { current: null | TextInput };
-    windowHeight: number;
 
     nextScreen: string | null;
 
@@ -66,7 +63,6 @@ class LoginScreen extends React.Component<Props, State> {
         this.onEmailChange = this.onInputChange.bind(this, true);
         this.onPasswordChange = this.onInputChange.bind(this, false);
         this.props.navigation.addListener('focus', this.onScreenFocus);
-        this.windowHeight = Dimensions.get('window').height;
     }
 
     onScreenFocus = () => {
@@ -323,13 +319,13 @@ class LoginScreen extends React.Component<Props, State> {
                     {this.getFormInput()}
                     <Card.Actions style={{flexWrap: "wrap"}}>
                         <Button
-                        icon="lock-question"
-                        mode="contained"
-                        onPress={this.onResetPasswordClick}
-                        color={this.props.theme.colors.warning}
-                        style={{marginRight: 'auto', marginBottom: 20}}>
-                        {i18n.t("screens.login.resetPassword")}
-                    </Button>
+                            icon="lock-question"
+                            mode="contained"
+                            onPress={this.onResetPasswordClick}
+                            color={this.props.theme.colors.warning}
+                            style={{marginRight: 'auto', marginBottom: 20}}>
+                            {i18n.t("screens.login.resetPassword")}
+                        </Button>
                         <Button
                             icon="send"
                             mode="contained"
@@ -359,7 +355,6 @@ class LoginScreen extends React.Component<Props, State> {
     }
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <LinearGradient
                 style={{
@@ -375,16 +370,10 @@ class LoginScreen extends React.Component<Props, State> {
                     enabled
                     keyboardVerticalOffset={100}
                 >
-                    <Animated.ScrollView
-                        onScroll={onScroll}
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
-                        style={{flex: 1}}
-                    >
-                        <View style={{height: this.windowHeight - containerPaddingTop}}>
+                    <CollapsibleScrollView>
+                        <View style={{height: "100%"}}>
                             {this.getMainCard()}
                         </View>
-
-
                         <MascotPopup
                             visible={this.state.mascotDialogVisible}
                             title={i18n.t("screens.login.mascotDialog.title")}
@@ -405,7 +394,7 @@ class LoginScreen extends React.Component<Props, State> {
                             onDismiss={this.hideErrorDialog}
                             errorCode={this.state.dialogError}
                         />
-                    </Animated.ScrollView>
+                    </CollapsibleScrollView>
                 </KeyboardAvoidingView>
             </LinearGradient>
         );
@@ -431,4 +420,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default withCollapsible(withTheme(LoginScreen));
+export default withTheme(LoginScreen);
diff --git a/src/screens/Amicale/ProfileScreen.js b/src/screens/Amicale/ProfileScreen.js
index 595444a..d107e3a 100644
--- a/src/screens/Amicale/ProfileScreen.js
+++ b/src/screens/Amicale/ProfileScreen.js
@@ -1,15 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, StyleSheet, View} from "react-native";
+import {FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import i18n from 'i18n-js';
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
-import {Collapsible} from "react-navigation-collapsible";
-import {withCollapsible} from "../../utils/withCollapsible";
 import type {cardList} from "../../components/Lists/CardList/CardList";
 import CardList from "../../components/Lists/CardList/CardList";
 import {StackNavigationProp} from "@react-navigation/stack";
@@ -17,11 +14,11 @@ import type {CustomTheme} from "../../managers/ThemeManager";
 import AvailableWebsites from "../../constants/AvailableWebsites";
 import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
     navigation: StackNavigationProp,
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -97,20 +94,11 @@ class ProfileScreen extends React.Component<Props, State> {
         if (data[0] != null) {
             this.data = data[0];
         }
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <View style={{flex: 1}}>
-                <Animated.FlatList
+                <CollapsibleFlatList
                     renderItem={this.getRenderItem}
                     data={this.flatListData}
-                    // Animations
-                    onScroll={onScroll}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
-                        minHeight: '100%'
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
                 <LogoutDialog
                     {...this.props}
@@ -441,4 +429,4 @@ const styles = StyleSheet.create({
 
 });
 
-export default withCollapsible(withTheme(ProfileScreen));
+export default withTheme(ProfileScreen);
diff --git a/src/screens/Amicale/VoteScreen.js b/src/screens/Amicale/VoteScreen.js
index 141f333..dd90e73 100644
--- a/src/screens/Amicale/VoteScreen.js
+++ b/src/screens/Amicale/VoteScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, RefreshControl, View} from "react-native";
+import {RefreshControl, View} from "react-native";
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
@@ -15,6 +15,7 @@ import MascotPopup from "../../components/Mascot/MascotPopup";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {Button} from "react-native-paper";
 import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 export type team = {
     id: number,
@@ -246,20 +247,17 @@ export default class VoteScreen extends React.Component<Props, State> {
 
         this.generateDateObject();
         return (
-            <View>
-                {/*$FlowFixMe*/}
-                <FlatList
-                    data={this.mainFlatListData}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={false}
-                            onRefresh={this.reloadData}
-                        />
-                    }
-                    extraData={this.state.hasVoted.toString()}
-                    renderItem={this.mainRenderItem}
-                />
-            </View>
+            <CollapsibleFlatList
+                data={this.mainFlatListData}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={false}
+                        onRefresh={this.reloadData}
+                    />
+                }
+                extraData={this.state.hasVoted.toString()}
+                renderItem={this.mainRenderItem}
+            />
         );
     };
 
diff --git a/src/screens/Game/screens/GameEndScreen.js b/src/screens/Game/screens/GameEndScreen.js
deleted file mode 100644
index 397212f..0000000
--- a/src/screens/Game/screens/GameEndScreen.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-
-import * as React from "react";
-import {StackNavigationProp} from "@react-navigation/stack";
-import type {CustomTheme} from "../../../managers/ThemeManager";
-import {withTheme} from "react-native-paper";
-
-type Props = {
-    navigation: StackNavigationProp,
-    theme: CustomTheme,
-}
-
-type State = {
-
-}
-
-class GameEndScreen extends React.Component<Props, State> {
-
-    render() {
-        return (
-            null
-        );
-    }
-}
-
-export default withTheme(GameEndScreen);
diff --git a/src/screens/Game/screens/GameStartScreen.js b/src/screens/Game/screens/GameStartScreen.js
index 56ae256..d86e473 100644
--- a/src/screens/Game/screens/GameStartScreen.js
+++ b/src/screens/Game/screens/GameStartScreen.js
@@ -4,7 +4,7 @@ import * as React from "react";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
-import {ScrollView, View} from "react-native";
+import {View} from "react-native";
 import i18n from "i18n-js";
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
 import MascotPopup from "../../../components/Mascot/MascotPopup";
@@ -17,6 +17,7 @@ import * as Animatable from "react-native-animatable";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import LinearGradient from "react-native-linear-gradient";
 import SpeechArrow from "../../../components/Mascot/SpeechArrow";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type GameStats = {
     score: number,
@@ -417,7 +418,7 @@ class GameStartScreen extends React.Component<Props, State> {
                     start={{x: 0, y: 0}}
                     end={{x: 0, y: 1}}
                 >
-                    <ScrollView>
+                    <CollapsibleScrollView>
                         {this.getMainContent()}
                         <MascotPopup
                             visible={this.state.mascotDialogVisible}
@@ -434,7 +435,7 @@ class GameStartScreen extends React.Component<Props, State> {
                             }}
                             emotion={MASCOT_STYLE.COOL}
                         />
-                    </ScrollView>
+                    </CollapsibleScrollView>
                 </LinearGradient>
             </View>
 
diff --git a/src/screens/Other/FeedbackScreen.js b/src/screens/Other/FeedbackScreen.js
index 70f3011..71d9307 100644
--- a/src/screens/Other/FeedbackScreen.js
+++ b/src/screens/Other/FeedbackScreen.js
@@ -3,8 +3,9 @@
 import * as React from 'react';
 import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
 import i18n from "i18n-js";
-import {Linking, ScrollView} from "react-native";
+import {Linking} from "react-native";
 import type {CustomTheme} from "../../managers/ThemeManager";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     theme: CustomTheme
@@ -76,7 +77,7 @@ class FeedbackScreen extends React.Component<Props> {
 
     render() {
         return (
-            <ScrollView style={{padding: 5}}>
+            <CollapsibleScrollView style={{padding: 5}}>
                 <Card>
                     <Card.Title
                         title={i18n.t('screens.feedback.bugs')}
@@ -107,7 +108,7 @@ class FeedbackScreen extends React.Component<Props> {
                     </Card.Content>
                     {this.getButtons(false)}
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }
diff --git a/src/screens/Other/Settings/DashboardEditScreen.js b/src/screens/Other/Settings/DashboardEditScreen.js
index 5eddd48..7a78588 100644
--- a/src/screens/Other/Settings/DashboardEditScreen.js
+++ b/src/screens/Other/Settings/DashboardEditScreen.js
@@ -13,6 +13,7 @@ import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/Dash
 import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 import i18n from "i18n-js";
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -108,43 +109,43 @@ class DashboardEditScreen extends React.Component<Props, State> {
         );
     }
 
+    getListHeader() {
+        return (
+            <Card style={{margin: 5}}>
+                <Card.Content>
+                    <View style={{padding: 5}}>
+                        <Button
+                            mode={"contained"}
+                            onPress={this.undoDashboard}
+                            style={{
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                marginBottom: 10,
+                            }}
+                        >
+                            {i18n.t("screens.settings.dashboardEdit.undo")}
+                        </Button>
+                        <View style={{height: 50}}>
+                            {this.getDashboard(this.state.currentDashboard)}
+                        </View>
+                    </View>
+                    <Paragraph style={{textAlign: "center"}}>
+                        {i18n.t("screens.settings.dashboardEdit.message")}
+                    </Paragraph>
+                </Card.Content>
+            </Card>
+        );
+    }
+
 
     render() {
         return (
-            <View style={{flex: 1}}>
-                <View style={{
-                    padding: 5
-                }}>
-                    <Button
-                        mode={"contained"}
-                        onPress={this.undoDashboard}
-                        style={{
-                            marginLeft: "auto",
-                            marginRight: "auto",
-                        }}
-                    >
-                        {i18n.t("screens.settings.dashboardEdit.undo")}
-                    </Button>
-                    <View style={{
-                        height: 50
-                    }}>
-                        {this.getDashboard(this.state.currentDashboard)}
-                    </View>
-
-                </View>
-                <FlatList
-                    data={this.content}
-                    renderItem={this.renderItem}
-                    ListHeaderComponent={<Card style={{margin: 5}}>
-                        <Card.Content>
-                            <Paragraph
-                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
-                        </Card.Content>
-
-                    </Card>}
-                    style={{}}
-                />
-            </View>
+            <CollapsibleFlatList
+                data={this.content}
+                renderItem={this.renderItem}
+                ListHeaderComponent={this.getListHeader()}
+                style={{}}
+            />
         );
     }
 
diff --git a/src/screens/Other/Settings/SettingsScreen.js b/src/screens/Other/Settings/SettingsScreen.js
index 5738f03..15db401 100644
--- a/src/screens/Other/Settings/SettingsScreen.js
+++ b/src/screens/Other/Settings/SettingsScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, View} from "react-native";
+import {View} from "react-native";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import ThemeManager from '../../../managers/ThemeManager';
 import i18n from "i18n-js";
@@ -10,6 +10,7 @@ import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
 import {Appearance} from "react-native-appearance";
 import CustomSlider from "../../../components/Overrides/CustomSlider";
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -187,7 +188,7 @@ class SettingsScreen extends React.Component<Props, State> {
 
     render() {
         return (
-            <ScrollView>
+            <CollapsibleScrollView>
                 <Card style={{margin: 5}}>
                     <Card.Title title={i18n.t('screens.settings.generalCard')}/>
                     <List.Section>
@@ -243,11 +244,11 @@ class SettingsScreen extends React.Component<Props, State> {
                     <List.Section>
                         {this.state.isDebugUnlocked
                             ? this.getNavigateItem(
-                                    "debug",
-                                    "bug-check",
-                                    i18n.t('screens.debug.title'),
-                                    ""
-                                )
+                                "debug",
+                                "bug-check",
+                                i18n.t('screens.debug.title'),
+                                ""
+                            )
                             : null}
                         {this.getNavigateItem(
                             "about",
@@ -264,7 +265,7 @@ class SettingsScreen extends React.Component<Props, State> {
                         )}
                     </List.Section>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }
diff --git a/src/screens/Services/Proximo/ProximoAboutScreen.js b/src/screens/Services/Proximo/ProximoAboutScreen.js
index a7ec10d..7f4a7b3 100644
--- a/src/screens/Services/Proximo/ProximoAboutScreen.js
+++ b/src/screens/Services/Proximo/ProximoAboutScreen.js
@@ -1,11 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import {Image, ScrollView, View} from 'react-native';
+import {Image, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text} from 'react-native-paper';
 import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -20,7 +21,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
 
     render() {
         return (
-            <ScrollView style={{padding: 5}}>
+            <CollapsibleScrollView style={{padding: 5}}>
                 <View style={{
                     width: '100%',
                     height: 100,
@@ -52,7 +53,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                         <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
                     </Card.Content>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }
diff --git a/src/screens/Services/Proximo/ProximoListScreen.js b/src/screens/Services/Proximo/ProximoListScreen.js
index c92a950..7de8054 100644
--- a/src/screens/Services/Proximo/ProximoListScreen.js
+++ b/src/screens/Services/Proximo/ProximoListScreen.js
@@ -1,17 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
+import {Image, Platform, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../../components/Overrides/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../../../utils/Search";
 import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
-import {withCollapsible} from "../../../utils/withCollapsible";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../../managers/ThemeManager";
-import {Collapsible} from "react-navigation-collapsible";
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -43,7 +42,6 @@ type Props = {
     navigation: StackNavigationProp,
     route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
     theme: CustomTheme,
-    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -300,7 +298,6 @@ class ProximoListScreen extends React.Component<Props, State> {
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <View style={{
                 height: '100%'
@@ -308,7 +305,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                 <CustomModal onRef={this.onModalRef}>
                     {this.state.modalCurrentDisplayItem}
                 </CustomModal>
-                <Animated.FlatList
+                <CollapsibleFlatList
                     data={this.listData}
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
                     keyExtractor={this.keyExtractor}
@@ -317,16 +314,10 @@ class ProximoListScreen extends React.Component<Props, State> {
                     removeClippedSubviews={true}
                     getItemLayout={this.itemLayout}
                     initialNumToRender={10}
-                    // Animations
-                    onScroll={onScroll}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
             </View>
         );
     }
 }
 
-export default withCollapsible(withTheme(ProximoListScreen));
+export default withTheme(ProximoListScreen);
diff --git a/src/screens/Services/ServicesScreen.js b/src/screens/Services/ServicesScreen.js
index dd64828..a70dc2a 100644
--- a/src/screens/Services/ServicesScreen.js
+++ b/src/screens/Services/ServicesScreen.js
@@ -3,24 +3,20 @@
 import * as React from 'react';
 import type {cardList} from "../../components/Lists/CardList/CardList";
 import CardList from "../../components/Lists/CardList/CardList";
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
-import {withCollapsible} from "../../utils/withCollapsible";
-import {Collapsible} from "react-navigation-collapsible";
-import {Animated, Image, View} from "react-native";
+import {Image, View} from "react-native";
 import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
 import type {CustomTheme} from "../../managers/ThemeManager";
 import i18n from 'i18n-js';
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
-import ConnectionManager from "../../managers/ConnectionManager";
 import {StackNavigationProp} from "@react-navigation/stack";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
     navigation: StackNavigationProp,
-    collapsibleStack: Collapsible,
     theme: CustomTheme,
 }
 
@@ -106,18 +102,6 @@ class ServicesScreen extends React.Component<Props, State> {
             />
     }
 
-    /**
-     * Redirects to the given route or to the login screen if user is not logged in.
-     *
-     * @param route The route to navigate to
-     */
-    onAmicaleServicePress(route: string) {
-        if (ConnectionManager.getInstance().isLoggedIn())
-            this.props.navigation.navigate(route);
-        else
-            this.props.navigation.navigate("login", {nextScreen: route});
-    }
-
     /**
      * A list item showing a list of available services for the current category
      *
@@ -155,20 +139,14 @@ class ServicesScreen extends React.Component<Props, State> {
     }
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <View>
-                <Animated.FlatList
+                <CollapsibleFlatList
                     data={this.finalDataset}
                     renderItem={this.renderItem}
                     keyExtractor={this.keyExtractor}
-                    onScroll={onScroll}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                     ItemSeparatorComponent={() => <Divider/>}
+                    hasTab={true}
                 />
                 <MascotPopup
                     visible={this.state.mascotDialogVisible}
@@ -190,4 +168,4 @@ class ServicesScreen extends React.Component<Props, State> {
     }
 }
 
-export default withCollapsible(withTheme(ServicesScreen));
+export default withTheme(ServicesScreen);
diff --git a/src/utils/CollapsibleUtils.js b/src/utils/CollapsibleUtils.js
index e93e34f..c72734b 100644
--- a/src/utils/CollapsibleUtils.js
+++ b/src/utils/CollapsibleUtils.js
@@ -24,7 +24,7 @@ import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
 export function createScreenCollapsibleStack(
     name: string,
     Stack: StackNavigator,
-    component: React.Node,
+    component: React.ComponentType<any>,
     title: string,
     useNativeDriver?: boolean,
     options?: StackNavigationOptions,
diff --git a/src/utils/withCollapsible.js b/src/utils/withCollapsible.js
index 69ec754..748b4c8 100644
--- a/src/utils/withCollapsible.js
+++ b/src/utils/withCollapsible.js
@@ -12,30 +12,12 @@ import {useCollapsibleStack} from "react-navigation-collapsible";
  * This component will then receive the collapsibleStack prop.
  *
  * @param Component The component to use Collapsible with
- * @returns {React.ComponentType<React.ClassAttributes<unknown>>}
+ * @returns {React.ComponentType<any>}
  */
-export const withCollapsible = (Component: any) => {
+export const withCollapsible = (Component: React.ComponentType<any>) => {
     return React.forwardRef((props: any, ref: any) => {
-
-        const {
-            onScroll,
-            onScrollWithListener,
-            containerPaddingTop,
-            scrollIndicatorInsetTop,
-            translateY,
-            progress,
-            opacity,
-        } = useCollapsibleStack();
         return <Component
-            collapsibleStack={{
-                onScroll,
-                onScrollWithListener,
-                containerPaddingTop: containerPaddingTop,
-                scrollIndicatorInsetTop: scrollIndicatorInsetTop,
-                translateY,
-                progress,
-                opacity,
-            }}
+            collapsibleStack={useCollapsibleStack()}
             ref={ref}
             {...props}
         />;