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

locales/en.json

@@ -95,8 +95,10 @@
     },
     "home": {
       "title": "Campus",
-      "feedTitle": "Amicale's News",
+      "feedTitle": "Campus News",
       "feed": "Details",
+      "feedLoading": "Loading News",
+      "feedError": "Failed to load news",
       "dashboard": {
         "seeMore": "Click to see more",
         "todayEventsTitle": "Today's events",

locales/fr.json

@@ -95,8 +95,10 @@
     },
     "home": {
       "title": "Campus",
-      "feedTitle": "News de l'Amicale",
+      "feedTitle": "News du Campus",
       "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",

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

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;

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;

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;

src/components/Screens/WebSectionList.js

@@ -4,28 +4,31 @@ 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";
 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: { [key: string]: any },
+    navigation: StackNavigationProp,
     fetchUrl: string,
     autoRefreshTime: number,
     refreshOnFocus: boolean,
     renderItem: (data: { [key: string]: any }) => React.Node,
-    createDataset: (data: { [key: string]: any }) => Array<Object>,
+    createDataset: (data: { [key: string]: any } | null, isLoading?: boolean) => Array<Object>,
     onScroll: (event: SyntheticEvent<EventTarget>) => void,
     collapsibleStack: Collapsible,
 
     showError: boolean,
     itemHeight?: number,
     updateData?: number,
-    renderSectionHeader?: (data: { [key: string]: any }) => React.Node,
+    renderListHeaderComponent?: (data: { [key: string]: any } | null) => React.Node,
+    renderSectionHeader?: (data: { section: { [key: string]: any } }, isLoading?: boolean) => React.Node,
     stickyHeader?: boolean,
 }
 
@@ -53,7 +56,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
         showError: true,
     };
 
-    scrollRef: { current: null | Animated.SectionList };
     refreshInterval: IntervalID;
     lastRefresh: Date | null;
 
@@ -69,31 +71,26 @@ class WebSectionList extends React.PureComponent<Props, State> {
      * Allows to detect when the screen is focused
      */
     componentDidMount() {
-        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.props.navigation.addListener('focus', this.onScreenFocus);
+        this.props.navigation.addListener('blur', this.onScreenBlur);
         this.lastRefresh = null;
+        this.onRefresh();
     }
 
     /**
      * 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);
     }
 
@@ -173,7 +170,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     duration={500}
                     useNativeDriver
                 >
-                    {this.props.renderSectionHeader(data)}
+                    {this.props.renderSectionHeader(data, this.state.refreshing)}
                 </Animatable.View>
             );
         } else
@@ -205,16 +202,12 @@ class WebSectionList extends React.PureComponent<Props, State> {
     render() {
         let dataset = [];
         if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
-            if (this.state.fetchedData == null)
-                dataset = this.props.createDataset({});
-            else
-                dataset = this.props.createDataset(this.state.fetchedData);
+            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
-                    ref={this.scrollRef}
+                <CollapsibleSectionList
                     sections={dataset}
                     extraData={this.props.updateData}
                     refreshControl={
@@ -228,6 +221,9 @@ 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
@@ -236,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}

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

src/screens/About/AboutDependenciesScreen.js

@@ -1,10 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList} from "react-native";
 import packageJson from '../../../package';
 import {List} from 'react-native-paper';
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
+import {View} from "react-native-animatable";
 
 type listItem = {
     name: string,
@@ -59,14 +60,16 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
 
     render() {
         return (
-            <FlatList
-                data={this.data}
-                keyExtractor={this.keyExtractor}
-                renderItem={this.renderItem}
-                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                removeClippedSubviews={true}
-                getItemLayout={this.itemLayout}
-            />
+            <View>
+                <CollapsibleFlatList
+                    data={this.data}
+                    keyExtractor={this.keyExtractor}
+                    renderItem={this.renderItem}
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                    removeClippedSubviews={true}
+                    getItemLayout={this.itemLayout}
+                />
+            </View>
         );
     }
 }

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}

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}

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

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

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;

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;

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

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

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

src/screens/Amicale/LoginScreen.js

@@ -1,13 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
+import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
 import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager from "../../managers/ConnectionManager";
 import i18n from 'i18n-js';
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
-import {withCollapsible} from "../../utils/withCollapsible";
-import {Collapsible} from "react-navigation-collapsible";
 import type {CustomTheme} from "../../managers/ThemeManager";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {StackNavigationProp} from "@react-navigation/stack";
@@ -15,11 +13,11 @@ import AvailableWebsites from "../../constants/AvailableWebsites";
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
 import MascotPopup from "../../components/Mascot/MascotPopup";
 import LinearGradient from "react-native-linear-gradient";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
     route: { params: { nextScreen: string } },
-    collapsibleStack: Collapsible,
     theme: CustomTheme
 }
 
@@ -56,7 +54,6 @@ class LoginScreen extends React.Component<Props, State> {
     onEmailChange: (value: string) => null;
     onPasswordChange: (value: string) => null;
     passwordInputRef: { current: null | TextInput };
-    windowHeight: number;
 
     nextScreen: string | null;
 
@@ -66,7 +63,6 @@ class LoginScreen extends React.Component<Props, State> {
         this.onEmailChange = this.onInputChange.bind(this, true);
         this.onPasswordChange = this.onInputChange.bind(this, false);
         this.props.navigation.addListener('focus', this.onScreenFocus);
-        this.windowHeight = Dimensions.get('window').height;
     }
 
     onScreenFocus = () => {
@@ -323,13 +319,13 @@ class LoginScreen extends React.Component<Props, State> {
                     {this.getFormInput()}
                     <Card.Actions style={{flexWrap: "wrap"}}>
                         <Button
-                        icon="lock-question"
-                        mode="contained"
-                        onPress={this.onResetPasswordClick}
-                        color={this.props.theme.colors.warning}
-                        style={{marginRight: 'auto', marginBottom: 20}}>
-                        {i18n.t("screens.login.resetPassword")}
-                    </Button>
+                            icon="lock-question"
+                            mode="contained"
+                            onPress={this.onResetPasswordClick}
+                            color={this.props.theme.colors.warning}
+                            style={{marginRight: 'auto', marginBottom: 20}}>
+                            {i18n.t("screens.login.resetPassword")}
+                        </Button>
                         <Button
                             icon="send"
                             mode="contained"
@@ -359,7 +355,6 @@ class LoginScreen extends React.Component<Props, State> {
     }
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <LinearGradient
                 style={{
@@ -375,16 +370,10 @@ class LoginScreen extends React.Component<Props, State> {
                     enabled
                     keyboardVerticalOffset={100}
                 >
-                    <Animated.ScrollView
-                        onScroll={onScroll}
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
-                        style={{flex: 1}}
-                    >
-                        <View style={{height: this.windowHeight - containerPaddingTop}}>
+                    <CollapsibleScrollView>
+                        <View style={{height: "100%"}}>
                             {this.getMainCard()}
                         </View>
-
-
                         <MascotPopup
                             visible={this.state.mascotDialogVisible}
                             title={i18n.t("screens.login.mascotDialog.title")}
@@ -405,7 +394,7 @@ class LoginScreen extends React.Component<Props, State> {
                             onDismiss={this.hideErrorDialog}
                             errorCode={this.state.dialogError}
                         />
-                    </Animated.ScrollView>
+                    </CollapsibleScrollView>
                 </KeyboardAvoidingView>
             </LinearGradient>
         );
@@ -431,4 +420,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default withCollapsible(withTheme(LoginScreen));
+export default withTheme(LoginScreen);

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

src/screens/Amicale/VoteScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, RefreshControl, View} from "react-native";
+import {RefreshControl, View} from "react-native";
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
@@ -15,6 +15,7 @@ import MascotPopup from "../../components/Mascot/MascotPopup";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {Button} from "react-native-paper";
 import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
 
 export type team = {
     id: number,
@@ -246,20 +247,17 @@ export default class VoteScreen extends React.Component<Props, State> {
 
         this.generateDateObject();
         return (
-            <View>
-                {/*$FlowFixMe*/}
-                <FlatList
-                    data={this.mainFlatListData}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={false}
-                            onRefresh={this.reloadData}
-                        />
-                    }
-                    extraData={this.state.hasVoted.toString()}
-                    renderItem={this.mainRenderItem}
-                />
-            </View>
+            <CollapsibleFlatList
+                data={this.mainFlatListData}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={false}
+                        onRefresh={this.reloadData}
+                    />
+                }
+                extraData={this.state.hasVoted.toString()}
+                renderItem={this.mainRenderItem}
+            />
         );
     };
 

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

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>
 

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 {Headline, withTheme} from 'react-native-paper';
+import {ActivityIndicator, 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,6 +16,7 @@ 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";
@@ -23,6 +24,8 @@ 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";
 
 
@@ -61,11 +64,6 @@ export type fullDashboard = {
     available_tutorials: number,
 }
 
-type dashboardItem = {
-    id: string,
-    content: Array<{ [key: string]: any }>
-};
-
 export type event = {
     id: number,
     title: string,
@@ -78,12 +76,6 @@ export type event = {
     url: string,
 }
 
-type listSection = {
-    title: string,
-    data: Array<dashboardItem> | Array<feedItem>,
-    id: string
-};
-
 type Props = {
     navigation: StackNavigationProp,
     route: { params: any, ... },
@@ -203,84 +195,41 @@ 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) => {
+    createDataset = (fetchedData: rawDashboard | null, isLoading: boolean) => {
         // fetchedData = DATA;
-        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);
+        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]
+                }
+            ];
         else
-            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]
-            }
-        ];
+            return [
+                {
+                    title: isLoading ? i18n.t("screens.home.feedLoading") : i18n.t("screens.home.feedError"),
+                    data: [],
+                    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
@@ -427,22 +376,13 @@ class HomeScreen extends React.Component<Props, State> {
     }
 
     /**
-     * Gets a dashboard shortcut item
+     * Gets a dashboard item with action buttons
      *
-     * @param item
      * @returns {*}
      */
-    dashboardRowRenderItem = ({item}: { item: DashboardItem }) => {
-        return (
-            <SmallDashboardItem
-                image={item.image}
-                onPress={item.onPress}
-                badgeCount={this.currentDashboard != null && item.badgeFunction != null
-                    ? item.badgeFunction(this.currentDashboard)
-                    : null}
-            />
-        );
-    };
+    getDashboardActions() {
+        return <ActionsDashBoardItem {...this.props} isLoggedIn={this.isLoggedIn}/>;
+    }
 
     /**
      * Gets a dashboard item with a row of shortcut buttons.
@@ -450,7 +390,7 @@ class HomeScreen extends React.Component<Props, State> {
      * @param content
      * @return {*}
      */
-    getDashboardRow(content: Array<DashboardItem>) {
+    getDashboardRow(content: Array<ServiceItem>) {
         return (
             //$FlowFixMe
             <FlatList
@@ -466,6 +406,24 @@ 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
      *
@@ -491,28 +449,15 @@ class HomeScreen extends React.Component<Props, State> {
      * @param section The current section
      * @return {*}
      */
-    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");
+    getRenderItem = ({item}: { item: feedItem, }) => this.getFeedItem(item);
 
     onScroll = (event: SyntheticEvent<EventTarget>) => {
         if (this.fabRef.current != null)
             this.fabRef.current.onScroll(event);
     };
 
-    renderSectionHeader = (data: { [key: string]: any }) => {
-        if (data.section.title !== "")
+    renderSectionHeader = (data: { section: { [key: string]: any } }, isLoading: boolean) => {
+        if (data.section.data.length > 0)
             return (
                 <Headline style={{
                     textAlign: "center",
@@ -523,7 +468,59 @@ class HomeScreen extends React.Component<Props, State> {
                 </Headline>
             )
         else
-            return null;
+            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>
+        );
     }
 
     /**
@@ -556,6 +553,7 @@ class HomeScreen extends React.Component<Props, State> {
                         onScroll={this.onScroll}
                         showError={false}
                         renderSectionHeader={this.renderSectionHeader}
+                        renderListHeaderComponent={this.getListHeader}
                     />
                 </View>
                 <MascotPopup

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

src/screens/Other/Settings/DashboardEditScreen.js

@@ -13,6 +13,7 @@ import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/Dash
 import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 import i18n from "i18n-js";
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -108,43 +109,43 @@ class DashboardEditScreen extends React.Component<Props, State> {
         );
     }
 
+    getListHeader() {
+        return (
+            <Card style={{margin: 5}}>
+                <Card.Content>
+                    <View style={{padding: 5}}>
+                        <Button
+                            mode={"contained"}
+                            onPress={this.undoDashboard}
+                            style={{
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                marginBottom: 10,
+                            }}
+                        >
+                            {i18n.t("screens.settings.dashboardEdit.undo")}
+                        </Button>
+                        <View style={{height: 50}}>
+                            {this.getDashboard(this.state.currentDashboard)}
+                        </View>
+                    </View>
+                    <Paragraph style={{textAlign: "center"}}>
+                        {i18n.t("screens.settings.dashboardEdit.message")}
+                    </Paragraph>
+                </Card.Content>
+            </Card>
+        );
+    }
+
 
     render() {
         return (
-            <View style={{flex: 1}}>
-                <View style={{
-                    padding: 5
-                }}>
-                    <Button
-                        mode={"contained"}
-                        onPress={this.undoDashboard}
-                        style={{
-                            marginLeft: "auto",
-                            marginRight: "auto",
-                        }}
-                    >
-                        {i18n.t("screens.settings.dashboardEdit.undo")}
-                    </Button>
-                    <View style={{
-                        height: 50
-                    }}>
-                        {this.getDashboard(this.state.currentDashboard)}
-                    </View>
-
-                </View>
-                <FlatList
-                    data={this.content}
-                    renderItem={this.renderItem}
-                    ListHeaderComponent={<Card style={{margin: 5}}>
-                        <Card.Content>
-                            <Paragraph
-                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
-                        </Card.Content>
-
-                    </Card>}
-                    style={{}}
-                />
-            </View>
+            <CollapsibleFlatList
+                data={this.content}
+                renderItem={this.renderItem}
+                ListHeaderComponent={this.getListHeader()}
+                style={{}}
+            />
         );
     }
 

src/screens/Other/Settings/SettingsScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, View} from "react-native";
+import {View} from "react-native";
 import type {CustomTheme} from "../../../managers/ThemeManager";
 import ThemeManager from '../../../managers/ThemeManager';
 import i18n from "i18n-js";
@@ -10,6 +10,7 @@ import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
 import {Appearance} from "react-native-appearance";
 import CustomSlider from "../../../components/Overrides/CustomSlider";
 import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -187,7 +188,7 @@ class SettingsScreen extends React.Component<Props, State> {
 
     render() {
         return (
-            <ScrollView>
+            <CollapsibleScrollView>
                 <Card style={{margin: 5}}>
                     <Card.Title title={i18n.t('screens.settings.generalCard')}/>
                     <List.Section>
@@ -243,11 +244,11 @@ class SettingsScreen extends React.Component<Props, State> {
                     <List.Section>
                         {this.state.isDebugUnlocked
                             ? this.getNavigateItem(
-                                    "debug",
-                                    "bug-check",
-                                    i18n.t('screens.debug.title'),
-                                    ""
-                                )
+                                "debug",
+                                "bug-check",
+                                i18n.t('screens.debug.title'),
+                                ""
+                            )
                             : null}
                         {this.getNavigateItem(
                             "about",
@@ -264,7 +265,7 @@ class SettingsScreen extends React.Component<Props, State> {
                         )}
                     </List.Section>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }

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

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

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

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,

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}
         />;