32 changed files with 531 additions and 522 deletions
--- a/locales/en.json
+++ b/locales/en.json
@ -95,10 +95,8 @@
    },
    "home": {
      "title": "Campus",
-      "feedTitle": "Campus News",
+      "feedTitle": "Amicale's News",
      "feed": "Details",
-      "feedLoading": "Loading News",
-      "feedError": "Failed to load news",
      "dashboard": {
        "seeMore": "Click to see more",
        "todayEventsTitle": "Today's events",
--- a/locales/fr.json
+++ b/locales/fr.json
@ -95,10 +95,8 @@
    },
    "home": {
      "title": "Campus",
-      "feedTitle": "News du Campus",
+      "feedTitle": "News de l'Amicale",
      "feed": "Détails",
-      "feedLoading": "Chargement des news",
-      "feedError": "Erreur de chargement des news",
      "dashboard": {
        "seeMore": "Clique pour plus d'infos",
        "todayEventsTitle": "Événements aujourd'hui",
--- a/src/components/Collapsible/CollapsibleComponent.js
+++ b/src/components/Collapsible/CollapsibleComponent.js
@ -1,51 +0,0 @@
-// @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
@ -1,26 +0,0 @@
-// @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
@ -1,26 +0,0 @@
-// @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
@ -1,26 +0,0 @@
-// @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,31 +4,28 @@ import * as React from 'react';
 import {ERROR_TYPE, readData} from "../../utils/WebData";
 import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
-import {RefreshControl, View} from "react-native";
+import {Animated, RefreshControl, View} from "react-native";
 import ErrorView from "./ErrorView";
 import BasicLoadingScreen from "./BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
 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,
+    navigation: { [key: string]: any },
    fetchUrl: string,
    autoRefreshTime: number,
    refreshOnFocus: boolean,
    renderItem: (data: { [key: string]: any }) => React.Node,
-    createDataset: (data: { [key: string]: any } | null, isLoading?: boolean) => Array<Object>,
+    createDataset: (data: { [key: string]: any }) => Array<Object>,
    onScroll: (event: SyntheticEvent<EventTarget>) => void,
    collapsibleStack: Collapsible,

    showError: boolean,
    itemHeight?: number,
    updateData?: number,
-    renderListHeaderComponent?: (data: { [key: string]: any } | null) => React.Node,
-    renderSectionHeader?: (data: { section: { [key: string]: any } }, isLoading?: boolean) => React.Node,
+    renderSectionHeader?: (data: { [key: string]: any }) => React.Node,
    stickyHeader?: boolean,
 }

@ -56,6 +53,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
        showError: true,
    };

+    scrollRef: { current: null | Animated.SectionList };
    refreshInterval: IntervalID;
    lastRefresh: Date | null;

@ -71,26 +69,31 @@ class WebSectionList extends React.PureComponent<Props, State> {
     * Allows to detect when the screen is focused
     */
    componentDidMount() {
-        this.props.navigation.addListener('focus', this.onScreenFocus);
-        this.props.navigation.addListener('blur', this.onScreenBlur);
-        this.lastRefresh = null;
+        const onScreenFocus = this.onScreenFocus.bind(this);
+        const onScreenBlur = this.onScreenBlur.bind(this);
+        this.props.navigation.addListener('focus', onScreenFocus);
+        this.props.navigation.addListener('blur', onScreenBlur);
+        this.scrollRef = React.createRef();
        this.onRefresh();
+        this.lastRefresh = null;
    }

    /**
     * Refreshes data when focusing the screen and setup a refresh interval if asked to
     */
-    onScreenFocus = () => {
+    onScreenFocus() {
        if (this.props.refreshOnFocus && this.lastRefresh)
            this.onRefresh();
        if (this.props.autoRefreshTime > 0)
            this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
+        // if (this.scrollRef.current) // Reset scroll to top
+        //     this.scrollRef.current.getNode().scrollToLocation({animated:false, itemIndex:0, sectionIndex:0});
    }

    /**
     * Removes any interval on un-focus
     */
-    onScreenBlur = () => {
+    onScreenBlur() {
        clearInterval(this.refreshInterval);
    }

@ -170,7 +173,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                    duration={500}
                    useNativeDriver
                >
-                    {this.props.renderSectionHeader(data, this.state.refreshing)}
+                    {this.props.renderSectionHeader(data)}
                </Animatable.View>
            );
        } else
@ -202,12 +205,16 @@ class WebSectionList extends React.PureComponent<Props, State> {
    render() {
        let dataset = [];
        if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
-            dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
+            if (this.state.fetchedData == null)
+                dataset = this.props.createDataset({});
+            else
+                dataset = this.props.createDataset(this.state.fetchedData);
        }
-        const {containerPaddingTop} = this.props.collapsibleStack;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
        return (
            <View>
-                <CollapsibleSectionList
+                <Animated.SectionList
+                    ref={this.scrollRef}
                    sections={dataset}
                    extraData={this.props.updateData}
                    refreshControl={
@ -221,9 +228,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
                    renderItem={this.renderItem}
                    stickySectionHeadersEnabled={this.props.stickyHeader}
                    style={{minHeight: '100%'}}
-                    ListHeaderComponent={this.props.renderListHeaderComponent != null
-                        ? this.props.renderListHeaderComponent(this.state.fetchedData)
-                        : null}
                    ListEmptyComponent={this.state.refreshing
                        ? <BasicLoadingScreen/>
                        : <ErrorView
@ -232,8 +236,14 @@ class WebSectionList extends React.PureComponent<Props, State> {
                            onRefresh={this.onRefresh}/>
                    }
                    getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
-                    onScroll={this.onScroll}
-                    hasTab={true}
+                    // Animations
+                    onScroll={onScrollWithListener(this.onScroll)}
+                    contentContainerStyle={{
+                        paddingTop: containerPaddingTop,
+                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
+                        minHeight: '100%'
+                    }}
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                />
                <Snackbar
                    visible={this.state.snackbarVisible}
--- a/src/navigation/MainNavigator.js
+++ b/src/navigation/MainNavigator.js
@ -28,13 +28,16 @@ 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,
-    ...TransitionPresets.SlideFromRightIOS,
+    ...screenTransition,
 };


@ -55,37 +58,48 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                    title: i18n.t('screens.home.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="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"),
+                }}
+            />
            <MainStack.Screen
                name="game-main"
                component={GameMainScreen}
@ -93,91 +107,73 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                    title: i18n.t("screens.game.title"),
                }}
            />
-            {createScreenCollapsibleStack(
-                "login",
-                MainStack,
-                LoginScreen,
-                i18n.t('screens.login.title'),
-                true,
-                {headerTintColor: "#fff"},
-                'transparent')}
+            <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')}
            {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'),
-            )}
-            {createScreenCollapsibleStack(
-                "proximo-about",
-                MainStack,
-                ProximoAboutScreen,
-                i18n.t('screens.proximo.title'),
                true,
-                {...modalTransition},
+                {...screenTransition},
            )}
+            <MainStack.Screen
+                name="proximo-about"
+                component={ProximoAboutScreen}
+                options={{
+                    title: i18n.t('screens.proximo.title'),
+                    ...modalTransition,
+                }}
+            />

-            {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'))}
+            {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'),
+                }}
+            />
        </MainStack.Navigator>
    );
 }
--- a/src/screens/About/AboutDependenciesScreen.js
+++ b/src/screens/About/AboutDependenciesScreen.js
@ -1,11 +1,10 @@
 // @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,
@ -60,16 +59,14 @@ export default class AboutDependenciesScreen extends React.Component<Props> {

    render() {
        return (
-            <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>
+            <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}
+            />
        );
    }
 }
--- a/src/screens/About/AboutScreen.js
+++ b/src/screens/About/AboutScreen.js
@ -6,7 +6,6 @@ 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,
@ -339,7 +338,7 @@ class AboutScreen extends React.Component<Props> {

    render() {
        return (
-            <CollapsibleFlatList
+            <FlatList
                style={{padding: 5}}
                data={this.dataOrder}
                renderItem={this.getMainCard}
--- a/src/screens/About/DebugScreen.js
+++ b/src/screens/About/DebugScreen.js
@ -1,14 +1,13 @@
 // @flow

 import * as React from 'react';
-import {View} from "react-native";
+import {FlatList, 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,
@ -169,7 +168,7 @@ class DebugScreen extends React.Component<Props, State> {
                    {this.getModalContent()}
                </CustomModal>
                {/*$FlowFixMe*/}
-                <CollapsibleFlatList
+                <FlatList
                    data={this.state.currentPreferences}
                    extraData={this.state.currentPreferences}
                    renderItem={this.renderItem}
--- a/src/screens/Amicale/AmicaleContactScreen.js
+++ b/src/screens/Amicale/AmicaleContactScreen.js
@ -1,13 +1,16 @@
 // @flow

 import * as React from 'react';
-import {FlatList, Image, Linking, View} from 'react-native';
+import {Animated, 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 = {
@ -127,14 +130,22 @@ class AmicaleContactScreen extends React.Component<Props> {
    };

    render() {
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
        return (
-            <CollapsibleFlatList
+            <Animated.FlatList
                data={[{key: "1"}]}
                renderItem={this.getScreen}
-                hasTab={true}
+                // Animations
+                onScroll={onScroll}
+                contentContainerStyle={{
+                    paddingTop: containerPaddingTop,
+                    paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
+                    minHeight: '100%'
+                }}
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
            />
        );
    }
 }

-export default withTheme(AmicaleContactScreen);
+export default withCollapsible(withTheme(AmicaleContactScreen));
--- a/src/screens/Amicale/Clubs/ClubAboutScreen.js
+++ b/src/screens/Amicale/Clubs/ClubAboutScreen.js
@ -1,11 +1,10 @@
 // @flow

 import * as React from 'react';
-import {Image, View} from 'react-native';
+import {Image, ScrollView, 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 = {};

@ -15,7 +14,7 @@ class ClubAboutScreen extends React.Component<Props> {

    render() {
        return (
-            <CollapsibleScrollView style={{padding: 5}}>
+            <ScrollView style={{padding: 5}}>
                <View style={{
                    width: '100%',
                    height: 100,
@ -44,7 +43,7 @@ class ClubAboutScreen extends React.Component<Props> {
                        />
                    </Card.Content>
                </Card>
-            </CollapsibleScrollView>
+            </ScrollView>
        );
    }
 }
--- 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, View} from 'react-native';
+import {Linking, ScrollView, 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,7 +12,6 @@ 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,
@ -185,10 +184,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
        }
        if (data != null) {
            return (
-                <CollapsibleScrollView
-                    style={{paddingLeft: 5, paddingRight: 5}}
-                    hasTab={true}
-                >
+                <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
                    {this.getCategoriesRender(data.category)}
                    {data.logo !== null ?
                        <View style={{
@ -218,7 +214,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
                        </Card.Content>
                        : <View/>}
                    {this.getManagersRender(data.responsibles, data.email)}
-                </CollapsibleScrollView>
+                </ScrollView>
            );
        } 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 {Platform} from "react-native";
+import {Animated, Platform} from "react-native";
 import {Searchbar} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@ -9,9 +9,10 @@ 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 CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
+import {Collapsible} from "react-navigation-collapsible";

 export type category = {
    id: number,
@ -31,6 +32,7 @@ export type club = {
 type Props = {
    navigation: StackNavigationProp,
    theme: CustomTheme,
+    collapsibleStack: Collapsible,
 }

 type State = {
@ -109,8 +111,9 @@ class ClubListScreen extends React.Component<Props, State> {
            clubList = data[0].clubs;
        }
        this.categories = categoryList;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
        return (
-            <CollapsibleFlatList
+            <Animated.FlatList
                data={clubList}
                keyExtractor={this.keyExtractor}
                renderItem={this.getRenderItem}
@ -118,6 +121,10 @@ 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}}
            />
        )
    };
@ -234,4 +241,4 @@ class ClubListScreen extends React.Component<Props, State> {
    }
 }

-export default ClubListScreen;
+export default withCollapsible(ClubListScreen);
--- a/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
@ -2,13 +2,14 @@

 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 {View} from "react-native";
+import {Animated, View} from "react-native";
 import i18n from "i18n-js";
 import {getRelativeDateString} from "../../../utils/EquipmentBooking";
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";

 type Props = {
    navigation: StackNavigationProp,
@ -19,6 +20,7 @@ type Props = {
        },
    },
    theme: CustomTheme,
+    collapsibleStack: Collapsible,
 }


@ -42,13 +44,21 @@ 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 (
-                <CollapsibleScrollView>
+                <Animated.ScrollView
+                    // Animations
+                    onScroll={onScroll}
+                    contentContainerStyle={{
+                        paddingTop: containerPaddingTop,
+                        minHeight: '100%'
+                    }}
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
                    <Card style={{margin: 5}}>
                        <Card.Content>
                            <View style={{flex: 1}}>
@ -93,7 +103,7 @@ class EquipmentConfirmScreen extends React.Component<Props> {
                            </Paragraph>
                        </Card.Content>
                    </Card>
-                </CollapsibleScrollView>
+                </Animated.ScrollView>
            );
        } else
            return null;
@ -102,4 +112,4 @@ class EquipmentConfirmScreen extends React.Component<Props> {

 }

-export default withTheme(EquipmentConfirmScreen);
+export default withCollapsible(withTheme(EquipmentConfirmScreen));
--- a/src/screens/Amicale/Equipment/EquipmentListScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentListScreen.js
@ -1,9 +1,11 @@
 // @flow

 import * as React from 'react';
-import {View} from "react-native";
+import {Animated, 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";
@ -12,11 +14,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 = {
@ -27,7 +29,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 = {
@ -131,12 +133,20 @@ class EquipmentListScreen extends React.Component<Props, State> {
            if (fetchedData != null)
                this.userRents = fetchedData["locations"];
        }
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
        return (
-            <CollapsibleFlatList
+            <Animated.FlatList
                keyExtractor={this.keyExtractor}
                renderItem={this.getRenderItem}
                ListHeaderComponent={this.getListHeader()}
                data={this.data}
+                // Animations
+                onScroll={onScroll}
+                contentContainerStyle={{
+                    paddingTop: containerPaddingTop,
+                    minHeight: '100%'
+                }}
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
            />
        )
    };
@ -193,4 +203,4 @@ class EquipmentListScreen extends React.Component<Props, State> {
    }
 }

-export default withTheme(EquipmentListScreen);
+export default withCollapsible(withTheme(EquipmentListScreen));
--- a/src/screens/Amicale/Equipment/EquipmentRentScreen.js
+++ b/src/screens/Amicale/Equipment/EquipmentRentScreen.js
@ -2,10 +2,12 @@

 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 {BackHandler, View} from "react-native";
+import {Animated, BackHandler, View} from "react-native";
 import * as Animatable from "react-native-animatable";
 import i18n from "i18n-js";
 import {CalendarList} from "react-native-calendars";
@ -20,7 +22,6 @@ import {
    isEquipmentAvailable
 } from "../../../utils/EquipmentBooking";
 import ConnectionManager from "../../../managers/ConnectionManager";
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";

 type Props = {
    navigation: StackNavigationProp,
@ -30,6 +31,7 @@ type Props = {
        },
    },
    theme: CustomTheme,
+    collapsibleStack: Collapsible,
 }

 type State = {
@ -267,6 +269,8 @@ 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();
@ -276,7 +280,14 @@ class EquipmentRentScreen extends React.Component<Props, State> {
            const firstAvailability = getFirstEquipmentAvailability(item);
            return (
                <View style={{flex: 1}}>
-                    <CollapsibleScrollView>
+                    <Animated.ScrollView
+                        // Animations
+                        onScroll={onScroll}
+                        contentContainerStyle={{
+                            paddingTop: containerPaddingTop,
+                            minHeight: '100%'
+                        }}
+                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
                        <Card style={{margin: 5}}>
                            <Card.Content>
                                <View style={{flex: 1}}>
@ -385,7 +396,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
                            }}
                            style={{marginBottom: 50}}
                        />
-                    </CollapsibleScrollView>
+                    </Animated.ScrollView>
                    <LoadingConfirmDialog
                        visible={this.state.dialogVisible}
                        onDismiss={this.onDialogDismiss}
@ -438,4 +449,4 @@ class EquipmentRentScreen extends React.Component<Props, State> {

 }

-export default withTheme(EquipmentRentScreen);
+export default withCollapsible(withTheme(EquipmentRentScreen));
--- a/src/screens/Amicale/LoginScreen.js
+++ b/src/screens/Amicale/LoginScreen.js
@ -1,11 +1,13 @@
 // @flow

 import * as React from 'react';
-import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
+import {Animated, Dimensions, 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";
@ -13,11 +15,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
 }

@ -54,6 +56,7 @@ class LoginScreen extends React.Component<Props, State> {
    onEmailChange: (value: string) => null;
    onPasswordChange: (value: string) => null;
    passwordInputRef: { current: null | TextInput };
+    windowHeight: number;

    nextScreen: string | null;

@ -63,6 +66,7 @@ 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 = () => {
@ -319,13 +323,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"
@ -355,6 +359,7 @@ class LoginScreen extends React.Component<Props, State> {
    }

    render() {
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
        return (
            <LinearGradient
                style={{
@ -370,10 +375,16 @@ class LoginScreen extends React.Component<Props, State> {
                    enabled
                    keyboardVerticalOffset={100}
                >
-                    <CollapsibleScrollView>
-                        <View style={{height: "100%"}}>
+                    <Animated.ScrollView
+                        onScroll={onScroll}
+                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                        style={{flex: 1}}
+                    >
+                        <View style={{height: this.windowHeight - containerPaddingTop}}>
                            {this.getMainCard()}
                        </View>
+
+
                        <MascotPopup
                            visible={this.state.mascotDialogVisible}
                            title={i18n.t("screens.login.mascotDialog.title")}
@ -394,7 +405,7 @@ class LoginScreen extends React.Component<Props, State> {
                            onDismiss={this.hideErrorDialog}
                            errorCode={this.state.dialogError}
                        />
-                    </CollapsibleScrollView>
+                    </Animated.ScrollView>
                </KeyboardAvoidingView>
            </LinearGradient>
        );
@ -420,4 +431,4 @@ const styles = StyleSheet.create({
    }
 });

-export default withTheme(LoginScreen);
+export default withCollapsible(withTheme(LoginScreen));
--- a/src/screens/Amicale/ProfileScreen.js
+++ b/src/screens/Amicale/ProfileScreen.js
@ -1,12 +1,15 @@
 // @flow

 import * as React from 'react';
-import {FlatList, StyleSheet, View} from "react-native";
+import {Animated, 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";
@ -14,11 +17,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 = {
@ -94,11 +97,20 @@ 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}}>
-                <CollapsibleFlatList
+                <Animated.FlatList
                    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}
@ -429,4 +441,4 @@ const styles = StyleSheet.create({

 });

-export default withTheme(ProfileScreen);
+export default withCollapsible(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 {RefreshControl, View} from "react-native";
+import {FlatList, 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,7 +15,6 @@ 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,
@ -247,17 +246,20 @@ export default class VoteScreen extends React.Component<Props, State> {

        this.generateDateObject();
        return (
-            <CollapsibleFlatList
-                data={this.mainFlatListData}
-                refreshControl={
-                    <RefreshControl
-                        refreshing={false}
-                        onRefresh={this.reloadData}
-                    />
-                }
-                extraData={this.state.hasVoted.toString()}
-                renderItem={this.mainRenderItem}
-            />
+            <View>
+                {/*$FlowFixMe*/}
+                <FlatList
+                    data={this.mainFlatListData}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={false}
+                            onRefresh={this.reloadData}
+                        />
+                    }
+                    extraData={this.state.hasVoted.toString()}
+                    renderItem={this.mainRenderItem}
+                />
+            </View>
        );
    };

--- a/src/screens/Game/screens/GameEndScreen.js
+++ b/src/screens/Game/screens/GameEndScreen.js
@ -0,0 +1,26 @@
+// @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 {View} from "react-native";
+import {ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
 import MascotPopup from "../../../components/Mascot/MascotPopup";
@ -17,7 +17,6 @@ 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,
@ -418,7 +417,7 @@ class GameStartScreen extends React.Component<Props, State> {
                    start={{x: 0, y: 0}}
                    end={{x: 0, y: 1}}
                >
-                    <CollapsibleScrollView>
+                    <ScrollView>
                        {this.getMainContent()}
                        <MascotPopup
                            visible={this.state.mascotDialogVisible}
@ -435,7 +434,7 @@ class GameStartScreen extends React.Component<Props, State> {
                            }}
                            emotion={MASCOT_STYLE.COOL}
                        />
-                    </CollapsibleScrollView>
+                    </ScrollView>
                </LinearGradient>
            </View>

--- a/src/screens/Home/HomeScreen.js
+++ b/src/screens/Home/HomeScreen.js
@ -5,7 +5,7 @@ import {FlatList} from 'react-native';
 import i18n from "i18n-js";
 import DashboardItem from "../../components/Home/EventDashboardItem";
 import WebSectionList from "../../components/Screens/WebSectionList";
-import {ActivityIndicator, Headline, withTheme} from 'react-native-paper';
+import {Headline, withTheme} from 'react-native-paper';
 import FeedItem from "../../components/Home/FeedItem";
 import SmallDashboardItem from "../../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../../components/Home/PreviewEventDashboardItem";
@ -16,7 +16,6 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
 import AnimatedFAB from "../../components/Animations/AnimatedFAB";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../managers/ThemeManager";
-import * as Animatable from "react-native-animatable";
 import {View} from "react-native-animatable";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
@ -24,8 +23,6 @@ import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import DashboardManager from "../../managers/DashboardManager";
-import type {ServiceItem} from "../../managers/ServicesManager";
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 // import DATA from "../dashboard_data.json";


@ -64,6 +61,11 @@ export type fullDashboard = {
    available_tutorials: number,
 }

+type dashboardItem = {
+    id: string,
+    content: Array<{ [key: string]: any }>
+};
+
 export type event = {
    id: number,
    title: string,
@ -76,6 +78,12 @@ export type event = {
    url: string,
 }

+type listSection = {
+    title: string,
+    data: Array<dashboardItem> | Array<feedItem>,
+    id: string
+};
+
 type Props = {
    navigation: StackNavigationProp,
    route: { params: any, ... },
@ -195,41 +203,84 @@ class HomeScreen extends React.Component<Props, State> {

    hideDisconnectDialog = () => this.setState({dialogVisible: false});

-    openScanner = () => this.props.navigation.navigate("scanner");
-
    /**
     * Creates the dataset to be used in the FlatList
     *
     * @param fetchedData
-     * @param isLoading
     * @return {*}
     */
-    createDataset = (fetchedData: rawDashboard | null, isLoading: boolean) => {
+    createDataset = (fetchedData: rawDashboard) => {
        // fetchedData = DATA;
-        if (fetchedData != null) {
-            if (fetchedData.news_feed != null)
-                this.currentNewFeed = fetchedData.news_feed.data;
-            if (fetchedData.dashboard != null)
-                this.currentDashboard = fetchedData.dashboard;
-        }
-        if (this.currentNewFeed.length > 0)
-            return [
-                {
-                    title: i18n.t("screens.home.feedTitle"),
-                    data: this.currentNewFeed,
-                    id: SECTIONS_ID[1]
-                }
-            ];
+        let dashboardData;
+        if (fetchedData.news_feed != null)
+            this.currentNewFeed = fetchedData.news_feed.data;
+        if (fetchedData.dashboard != null)
+            this.currentDashboard = fetchedData.dashboard;
+
+        if (fetchedData.dashboard != null)
+            dashboardData = this.generateDashboardDataset(fetchedData.dashboard);
        else
-            return [
-                {
-                    title: isLoading ? i18n.t("screens.home.feedLoading") : i18n.t("screens.home.feedError"),
-                    data: [],
-                    id: SECTIONS_ID[1]
-                }
-            ];
+            dashboardData = this.generateDashboardDataset(null);
+        return [
+            {
+                title: '',
+                data: dashboardData,
+                id: SECTIONS_ID[0]
+            },
+            {
+                title: i18n.t("screens.home.feedTitle"),
+                data: this.currentNewFeed,
+                id: SECTIONS_ID[1]
+            }
+        ];
    };

+    /**
+     * Generates the dataset associated to the dashboard to be displayed in the FlatList as a section
+     *
+     * @param dashboardData
+     * @return {Array<dashboardItem>}
+     */
+    generateDashboardDataset(dashboardData: fullDashboard | null): Array<dashboardItem> {
+        return [
+            {id: 'actions', content: []},
+            {
+                id: 'top',
+                content: this.dashboardManager.getCurrentDashboard(),
+            },
+            {
+                id: 'event',
+                content: dashboardData == null ? [] : dashboardData.today_events
+            },
+
+        ];
+    }
+
+    /**
+     * Gets a dashboard item
+     *
+     * @param item The item to display
+     * @return {*}
+     */
+    getDashboardItem(item: dashboardItem) {
+        let content = item.content;
+        if (item.id === 'event')
+            return this.getDashboardEvent(content);
+        else if (item.id === 'top')
+            return this.getDashboardRow(content);
+        else
+            return this.getDashboardActions();
+    }
+
+    /**
+     * Gets a dashboard item with action buttons
+     *
+     * @returns {*}
+     */
+    getDashboardActions() {
+        return <ActionsDashBoardItem {...this.props} isLoggedIn={this.isLoggedIn}/>;
+    }
+
    /**
     * Gets the time limit depending on the current day:
     * 17:30 for every day of the week except for thursday 11:30
@ -376,13 +427,22 @@ class HomeScreen extends React.Component<Props, State> {
    }

    /**
-     * Gets a dashboard item with action buttons
+     * Gets a dashboard shortcut item
     *
+     * @param item
     * @returns {*}
     */
-    getDashboardActions() {
-        return <ActionsDashBoardItem {...this.props} isLoggedIn={this.isLoggedIn}/>;
-    }
+    dashboardRowRenderItem = ({item}: { item: DashboardItem }) => {
+        return (
+            <SmallDashboardItem
+                image={item.image}
+                onPress={item.onPress}
+                badgeCount={this.currentDashboard != null && item.badgeFunction != null
+                    ? item.badgeFunction(this.currentDashboard)
+                    : null}
+            />
+        );
+    };

    /**
     * Gets a dashboard item with a row of shortcut buttons.
@ -390,7 +450,7 @@ class HomeScreen extends React.Component<Props, State> {
     * @param content
     * @return {*}
     */
-    getDashboardRow(content: Array<ServiceItem>) {
+    getDashboardRow(content: Array<DashboardItem>) {
        return (
            //$FlowFixMe
            <FlatList
@ -406,24 +466,6 @@ class HomeScreen extends React.Component<Props, State> {
            />);
    }

-    /**
-     * Gets a dashboard shortcut item
-     *
-     * @param item
-     * @returns {*}
-     */
-    dashboardRowRenderItem = ({item}: { item: ServiceItem }) => {
-        return (
-            <SmallDashboardItem
-                image={item.image}
-                onPress={item.onPress}
-                badgeCount={this.currentDashboard != null && item.badgeFunction != null
-                    ? item.badgeFunction(this.currentDashboard)
-                    : null}
-            />
-        );
-    };
-
    /**
     * Gets a render item for the given feed object
     *
@ -449,15 +491,28 @@ class HomeScreen extends React.Component<Props, State> {
     * @param section The current section
     * @return {*}
     */
-    getRenderItem = ({item}: { item: feedItem, }) => this.getFeedItem(item);
+    getRenderItem = ({item, section}: {
+        item: { [key: string]: any },
+        section: listSection
+    }) => {
+        if (section.id === SECTIONS_ID[0]) {
+            const data: dashboardItem = item;
+            return this.getDashboardItem(data);
+        } else {
+            const data: feedItem = item;
+            return this.getFeedItem(data);
+        }
+    };
+
+    openScanner = () => this.props.navigation.navigate("scanner");

    onScroll = (event: SyntheticEvent<EventTarget>) => {
        if (this.fabRef.current != null)
            this.fabRef.current.onScroll(event);
    };

-    renderSectionHeader = (data: { section: { [key: string]: any } }, isLoading: boolean) => {
-        if (data.section.data.length > 0)
+    renderSectionHeader = (data: { [key: string]: any }) => {
+        if (data.section.title !== "")
            return (
                <Headline style={{
                    textAlign: "center",
@ -468,59 +523,7 @@ class HomeScreen extends React.Component<Props, State> {
                </Headline>
            )
        else
-            return (
-                <View>
-                    <Headline style={{
-                        textAlign: "center",
-                        marginTop: 50,
-                        marginBottom: 10,
-                        marginLeft: 20,
-                        marginRight: 20,
-                        color: this.props.theme.colors.textDisabled
-                    }}>
-                        {data.section.title}
-                    </Headline>
-                    {isLoading
-                        ? <ActivityIndicator
-                            style={{
-                                marginTop: 10
-                            }}
-                        />
-                        : <MaterialCommunityIcons
-                            name={"access-point-network-off"}
-                            size={100}
-                            color={this.props.theme.colors.textDisabled}
-                            style={{
-                                marginLeft: "auto",
-                                marginRight: "auto",
-                            }}
-                        />}
-
-                </View>
-            );
-    }
-
-    getListHeader = (fetchedData: rawDashboard) => {
-        let dashboard = null;
-        if (fetchedData != null) {
-            dashboard = fetchedData.dashboard;
-        }
-
-        return (
-            <Animatable.View
-                animation={"fadeInDown"}
-                duration={500}
-                useNativeDriver={true}
-            >
-                {this.getDashboardActions()}
-                {this.getDashboardRow(this.dashboardManager.getCurrentDashboard())}
-                {this.getDashboardEvent(
-                    dashboard == null
-                        ? []
-                        : dashboard.today_events
-                )}
-            </Animatable.View>
-        );
+            return null;
    }

    /**
@ -553,7 +556,6 @@ class HomeScreen extends React.Component<Props, State> {
                        onScroll={this.onScroll}
                        showError={false}
                        renderSectionHeader={this.renderSectionHeader}
-                        renderListHeaderComponent={this.getListHeader}
                    />
                </View>
                <MascotPopup
--- a/src/screens/Other/FeedbackScreen.js
+++ b/src/screens/Other/FeedbackScreen.js
@ -3,9 +3,8 @@
 import * as React from 'react';
 import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
 import i18n from "i18n-js";
-import {Linking} from "react-native";
+import {Linking, ScrollView} from "react-native";
 import type {CustomTheme} from "../../managers/ThemeManager";
-import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";

 type Props = {
    theme: CustomTheme
@ -77,7 +76,7 @@ class FeedbackScreen extends React.Component<Props> {

    render() {
        return (
-            <CollapsibleScrollView style={{padding: 5}}>
+            <ScrollView style={{padding: 5}}>
                <Card>
                    <Card.Title
                        title={i18n.t('screens.feedback.bugs')}
@ -108,7 +107,7 @@ class FeedbackScreen extends React.Component<Props> {
                    </Card.Content>
                    {this.getButtons(false)}
                </Card>
-            </CollapsibleScrollView>
+            </ScrollView>
        );
    }
 }
--- a/src/screens/Other/Settings/DashboardEditScreen.js
+++ b/src/screens/Other/Settings/DashboardEditScreen.js
@ -13,7 +13,6 @@ 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,
@ -109,43 +108,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 (
-            <CollapsibleFlatList
-                data={this.content}
-                renderItem={this.renderItem}
-                ListHeaderComponent={this.getListHeader()}
-                style={{}}
-            />
+            <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>
        );
    }

--- 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 {View} from "react-native";
+import {ScrollView, View} from "react-native";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import ThemeManager from '../../../managers/ThemeManager';
 import i18n from "i18n-js";
@ -10,7 +10,6 @@ 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,
@ -188,7 +187,7 @@ class SettingsScreen extends React.Component<Props, State> {

    render() {
        return (
-            <CollapsibleScrollView>
+            <ScrollView>
                <Card style={{margin: 5}}>
                    <Card.Title title={i18n.t('screens.settings.generalCard')}/>
                    <List.Section>
@ -244,11 +243,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",
@ -265,7 +264,7 @@ class SettingsScreen extends React.Component<Props, State> {
                        )}
                    </List.Section>
                </Card>
-            </CollapsibleScrollView>
+            </ScrollView>
        );
    }
 }
--- a/src/screens/Services/Proximo/ProximoAboutScreen.js
+++ b/src/screens/Services/Proximo/ProximoAboutScreen.js
@ -1,12 +1,11 @@
 // @flow

 import * as React from 'react';
-import {Image, View} from 'react-native';
+import {Image, ScrollView, 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,
@ -21,7 +20,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {

    render() {
        return (
-            <CollapsibleScrollView style={{padding: 5}}>
+            <ScrollView style={{padding: 5}}>
                <View style={{
                    width: '100%',
                    height: 100,
@ -53,7 +52,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                        <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
                    </Card.Content>
                </Card>
-            </CollapsibleScrollView>
+            </ScrollView>
        );
    }
 }
--- a/src/screens/Services/Proximo/ProximoListScreen.js
+++ b/src/screens/Services/Proximo/ProximoListScreen.js
@ -1,16 +1,17 @@
 // @flow

 import * as React from 'react';
-import {Image, Platform, ScrollView, View} from "react-native";
+import {Animated, 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 CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
+import {Collapsible} from "react-navigation-collapsible";

 function sortPrice(a, b) {
    return a.price - b.price;
@ -42,6 +43,7 @@ type Props = {
    navigation: StackNavigationProp,
    route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
    theme: CustomTheme,
+    collapsibleStack: Collapsible,
 }

 type State = {
@ -298,6 +300,7 @@ 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%'
@ -305,7 +308,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                <CustomModal onRef={this.onModalRef}>
                    {this.state.modalCurrentDisplayItem}
                </CustomModal>
-                <CollapsibleFlatList
+                <Animated.FlatList
                    data={this.listData}
                    extraData={this.state.currentSearchString + this.state.currentSortMode}
                    keyExtractor={this.keyExtractor}
@ -314,10 +317,16 @@ 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 withTheme(ProximoListScreen);
+export default withCollapsible(withTheme(ProximoListScreen));
--- a/src/screens/Services/ServicesScreen.js
+++ b/src/screens/Services/ServicesScreen.js
@ -3,20 +3,24 @@
 import * as React from 'react';
 import type {cardList} from "../../components/Lists/CardList/CardList";
 import CardList from "../../components/Lists/CardList/CardList";
-import {Image, View} from "react-native";
+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 {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,
 }

@ -102,6 +106,18 @@ 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
     *
@ -139,14 +155,20 @@ class ServicesScreen extends React.Component<Props, State> {
    }

    render() {
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
        return (
            <View>
-                <CollapsibleFlatList
+                <Animated.FlatList
                    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}
@ -168,4 +190,4 @@ class ServicesScreen extends React.Component<Props, State> {
    }
 }

-export default withTheme(ServicesScreen);
+export default withCollapsible(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.ComponentType<any>,
+    component: React.Node,
    title: string,
    useNativeDriver?: boolean,
    options?: StackNavigationOptions,
--- a/src/utils/withCollapsible.js
+++ b/src/utils/withCollapsible.js
@ -12,12 +12,30 @@ 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<any>}
+ * @returns {React.ComponentType<React.ClassAttributes<unknown>>}
 */
-export const withCollapsible = (Component: React.ComponentType<any>) => {
+export const withCollapsible = (Component: any) => {
    return React.forwardRef((props: any, ref: any) => {
+
+        const {
+            onScroll,
+            onScrollWithListener,
+            containerPaddingTop,
+            scrollIndicatorInsetTop,
+            translateY,
+            progress,
+            opacity,
+        } = useCollapsibleStack();
        return <Component
-            collapsibleStack={useCollapsibleStack()}
+            collapsibleStack={{
+                onScroll,
+                onScrollWithListener,
+                containerPaddingTop: containerPaddingTop,
+                scrollIndicatorInsetTop: scrollIndicatorInsetTop,
+                translateY,
+                progress,
+                opacity,
+            }}
            ref={ref}
            {...props}
        />;