Added collapsible headers to more screens

src/navigation/TabNavigator.js

@@ -44,9 +44,21 @@ function ServicesStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services.title'))}
-            {createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
-            {createScreenCollapsibleStack("amicale-contact", ServicesStack, AmicaleContactScreen, i18n.t('screens.amicaleAbout.title'))}
+            {createScreenCollapsibleStack(
+                "index",
+                ServicesStack,
+                WebsitesHomeScreen,
+                i18n.t('screens.services.title'))}
+            {createScreenCollapsibleStack(
+                "services-section",
+                ServicesStack,
+                ServicesSectionScreen,
+                "SECTION")}
+            {createScreenCollapsibleStack(
+                "amicale-contact",
+                ServicesStack,
+                AmicaleContactScreen,
+                i18n.t('screens.amicaleAbout.title'))}
         </ServicesStack.Navigator>
     );
 }
@@ -60,12 +72,16 @@ function ProxiwashStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {createScreenCollapsibleStack("index", ProxiwashStack, ProxiwashScreen, i18n.t('screens.proxiwash.title'))}
-            <ProxiwashStack.Screen
-                name="proxiwash-about"
-                component={ProxiwashAboutScreen}
-                options={{title: i18n.t('screens.proxiwash.title'),}}
-            />
+            {createScreenCollapsibleStack(
+                "index",
+                ProxiwashStack,
+                ProxiwashScreen,
+                i18n.t('screens.proxiwash.title'))}
+            {createScreenCollapsibleStack(
+                "proxiwash-about",
+                ProxiwashStack,
+                ProxiwashAboutScreen,
+                i18n.t('screens.proxiwash.title'))}
         </ProxiwashStack.Navigator>
     );
 }
@@ -84,11 +100,11 @@ function PlanningStackComponent() {
                 component={PlanningScreen}
                 options={{title: i18n.t('screens.planning.title'),}}
             />
-            <PlanningStack.Screen
-                name="planning-information"
-                component={PlanningDisplayScreen}
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
-            />
+            {createScreenCollapsibleStack(
+                "planning-information",
+                PlanningStack,
+                PlanningDisplayScreen,
+                i18n.t('screens.planning.eventDetails'))}
         </PlanningStack.Navigator>
     );
 }
@@ -115,7 +131,8 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                         headerStyle: {
                             backgroundColor: colors.surface,
                         },
-                        headerTitle: (props) => <View style={{flexDirection: "row"}}>
+                        headerTitle: () =>
+                            <View style={{flexDirection: "row"}}>
                                 <Mascot
                                     style={{
                                         width: 50
@@ -151,21 +168,22 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 component={ScannerScreen}
                 options={{title: i18n.t('screens.scanner.title'),}}
             />
-            <HomeStack.Screen
-                name="club-information"
-                component={ClubDisplayScreen}
-                options={{title: i18n.t('screens.clubs.details'),}}
-            />
-            <HomeStack.Screen
-                name="feed-information"
-                component={FeedItemScreen}
-                options={{title: i18n.t('screens.home.feed'),}}
-            />
-            <HomeStack.Screen
-                name="planning-information"
-                component={PlanningDisplayScreen}
-                options={{title: i18n.t('screens.planning.eventDetails'),}}
-            />
+
+            {createScreenCollapsibleStack(
+                "club-information",
+                HomeStack,
+                ClubDisplayScreen,
+                i18n.t('screens.clubs.details'))}
+            {createScreenCollapsibleStack(
+                "feed-information",
+                HomeStack,
+                FeedItemScreen,
+                i18n.t('screens.home.feed'))}
+            {createScreenCollapsibleStack(
+                "planning-information",
+                HomeStack,
+                PlanningDisplayScreen,
+                i18n.t('screens.planning.eventDetails'))}
         </HomeStack.Navigator>
     );
 }
@@ -179,8 +197,16 @@ function PlanexStackComponent() {
             headerMode={"screen"}
             screenOptions={defaultScreenOptions}
         >
-            {getWebsiteStack("index", PlanexStack, PlanexScreen, i18n.t("screens.planex.title"))}
-            {createScreenCollapsibleStack("group-select", PlanexStack, GroupSelectionScreen, "GROUP SELECT")}
+            {getWebsiteStack(
+                "index",
+                PlanexStack,
+                PlanexScreen,
+                i18n.t("screens.planex.title"))}
+            {createScreenCollapsibleStack(
+                "group-select",
+                PlanexStack,
+                GroupSelectionScreen,
+                "")}
         </PlanexStack.Navigator>
     );
 }

src/screens/Home/FeedItemScreen.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, Card, Text, withTheme} from 'react-native-paper';
 import ImageModal from 'react-native-image-modal';
 import Autolink from "react-native-autolink";
@@ -9,6 +9,7 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {feedItem} from "./HomeScreen";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -71,7 +72,10 @@ class FeedItemScreen extends React.Component<Props> {
     render() {
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
         return (
-            <ScrollView style={{margin: 5,}}>
+            <CollapsibleScrollView
+                style={{margin: 5,}}
+                hasTab={true}
+            >
                 <Card.Title
                     title={NAME_AMICALE}
                     subtitle={this.date}
@@ -99,7 +103,7 @@ class FeedItemScreen extends React.Component<Props> {
                         /> : null
                     }
                 </Card.Content>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }

src/screens/Planning/PlanningDisplayScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
 import {Card, withTheme} from 'react-native-paper';
 import DateManager from "../../managers/DateManager";
@@ -14,6 +14,7 @@ import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import i18n from 'i18n-js';
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../managers/ThemeManager";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {
     navigation: StackNavigationProp,
@@ -108,7 +109,10 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
         if (dateString !== null)
             subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
         return (
-            <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
+            <CollapsibleScrollView
+                style={{paddingLeft: 5, paddingRight: 5}}
+                hasTab={true}
+            >
                 <Card.Title
                     title={this.displayData.title}
                     subtitle={subtitle}
@@ -133,7 +137,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                         <CustomHTML html={this.displayData.description}/>
                     </Card.Content>
                     : <View/>}
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 

src/screens/Proxiwash/ProxiwashAboutScreen.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 i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
 type Props = {};
 
@@ -17,7 +18,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
 
     render() {
         return (
-            <ScrollView style={{padding: 5}}>
+            <CollapsibleScrollView
+                style={{padding: 5}}
+                hasTab={true}
+            >
                 <View style={{
                     width: '100%',
                     height: 100,
@@ -76,7 +80,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                         <Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
                     </Card.Content>
                 </Card>
-            </ScrollView>
+            </CollapsibleScrollView>
         );
     }
 }