Added collapsible header to more screens and added an abstraction layer around collapsible behaviour

2020-07-22 23:54:05 +02:00 · 2020-07-22 23:54:05 +02:00 · be33726e39
commit be33726e39
parent 22d5f61fc5
29 changed files with 393 additions and 399 deletions
--- a/src/components/Collapsible/CollapsibleComponent.js
+++ 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);
--- a/src/components/Collapsible/CollapsibleFlatList.js
+++ 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;
--- a/src/components/Collapsible/CollapsibleScrollView.js
+++ 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;
--- a/src/components/Collapsible/CollapsibleSectionList.js
+++ 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;
--- 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}
--- 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>
    );
 }
--- 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,7 +60,8 @@ export default class AboutDependenciesScreen extends React.Component<Props> {

    render() {
        return (
-            <FlatList
+            <View>
+                <CollapsibleFlatList
                    data={this.data}
                    keyExtractor={this.keyExtractor}
                    renderItem={this.renderItem}
@ -67,6 +69,7 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
                    removeClippedSubviews={true}
                    getItemLayout={this.itemLayout}
                />
+            </View>
        );
    }
 }
--- 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}
--- 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}
--- 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);
--- 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>
        );
    }
 }
--- 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;
--- 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;
--- 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);
--- 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);
--- 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);
--- 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 = () => {
@ -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);
--- 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);
--- 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,9 +247,7 @@ export default class VoteScreen extends React.Component<Props, State> {

        this.generateDateObject();
        return (
-            <View>
-                {/*$FlowFixMe*/}
-                <FlatList
+            <CollapsibleFlatList
                data={this.mainFlatListData}
                refreshControl={
                    <RefreshControl
@ -259,7 +258,6 @@ export default class VoteScreen extends React.Component<Props, State> {
                extraData={this.state.hasVoted.toString()}
                renderItem={this.mainRenderItem}
            />
-            </View>
        );
    };

--- a/src/screens/Game/screens/GameEndScreen.js
+++ b/src/screens/Game/screens/GameEndScreen.js
@ -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);
--- 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>

--- 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>
        );
    }
 }
--- 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> {
        );
    }

-
-    render() {
+    getListHeader() {
        return (
-            <View style={{flex: 1}}>
-                <View style={{
-                    padding: 5
-                }}>
+            <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
-                    }}>
+                        <View style={{height: 50}}>
                            {this.getDashboard(this.state.currentDashboard)}
                        </View>
-
                    </View>
-                <FlatList
+                    <Paragraph style={{textAlign: "center"}}>
+                        {i18n.t("screens.settings.dashboardEdit.message")}
+                    </Paragraph>
+                </Card.Content>
+            </Card>
+        );
+    }
+
+
+    render() {
+        return (
+            <CollapsibleFlatList
                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>}
+                ListHeaderComponent={this.getListHeader()}
                style={{}}
            />
-            </View>
        );
    }

--- 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>
@ -264,7 +265,7 @@ class SettingsScreen extends React.Component<Props, State> {
                        )}
                    </List.Section>
                </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
        );
    }
 }
--- 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>
        );
    }
 }
--- 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);
--- 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);
--- 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,
--- 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}
        />;