Browse Source

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

Arnaud Vergnet 3 years ago
parent
commit
be33726e39
29 changed files with 392 additions and 398 deletions
  1. 51
    0
      src/components/Collapsible/CollapsibleComponent.js
  2. 26
    0
      src/components/Collapsible/CollapsibleFlatList.js
  3. 26
    0
      src/components/Collapsible/CollapsibleScrollView.js
  4. 26
    0
      src/components/Collapsible/CollapsibleSectionList.js
  5. 6
    11
      src/components/Screens/WebSectionList.js
  6. 106
    102
      src/navigation/MainNavigator.js
  7. 12
    9
      src/screens/About/AboutDependenciesScreen.js
  8. 2
    1
      src/screens/About/AboutScreen.js
  9. 3
    2
      src/screens/About/DebugScreen.js
  10. 5
    16
      src/screens/Amicale/AmicaleContactScreen.js
  11. 4
    3
      src/screens/Amicale/Clubs/ClubAboutScreen.js
  12. 7
    3
      src/screens/Amicale/Clubs/ClubDisplayScreen.js
  13. 4
    11
      src/screens/Amicale/Clubs/ClubListScreen.js
  14. 5
    15
      src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
  15. 5
    15
      src/screens/Amicale/Equipment/EquipmentListScreen.js
  16. 5
    16
      src/screens/Amicale/Equipment/EquipmentRentScreen.js
  17. 13
    24
      src/screens/Amicale/LoginScreen.js
  18. 4
    16
      src/screens/Amicale/ProfileScreen.js
  19. 13
    15
      src/screens/Amicale/VoteScreen.js
  20. 0
    26
      src/screens/Game/screens/GameEndScreen.js
  21. 4
    3
      src/screens/Game/screens/GameStartScreen.js
  22. 4
    3
      src/screens/Other/FeedbackScreen.js
  23. 35
    34
      src/screens/Other/Settings/DashboardEditScreen.js
  24. 9
    8
      src/screens/Other/Settings/SettingsScreen.js
  25. 4
    3
      src/screens/Services/Proximo/ProximoAboutScreen.js
  26. 4
    13
      src/screens/Services/Proximo/ProximoListScreen.js
  27. 5
    27
      src/screens/Services/ServicesScreen.js
  28. 1
    1
      src/utils/CollapsibleUtils.js
  29. 3
    21
      src/utils/withCollapsible.js

+ 51
- 0
src/components/Collapsible/CollapsibleComponent.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {withCollapsible} from "../../utils/withCollapsible";
5
+import {Collapsible} from "react-navigation-collapsible";
6
+import CustomTabBar from "../Tabbar/CustomTabBar";
7
+
8
+export type CollapsibleComponentProps = {
9
+    children?: React.Node,
10
+    hasTab?: boolean,
11
+    onScroll?: (event: SyntheticEvent<EventTarget>) => void,
12
+};
13
+
14
+type Props = {
15
+    ...CollapsibleComponentProps,
16
+    collapsibleStack: Collapsible,
17
+    component: any,
18
+}
19
+
20
+class CollapsibleComponent extends React.Component<Props> {
21
+
22
+    static defaultProps = {
23
+        hasTab: false,
24
+    }
25
+
26
+    onScroll = (event: SyntheticEvent<EventTarget>) => {
27
+        if (this.props.onScroll)
28
+            this.props.onScroll(event);
29
+    }
30
+
31
+    render() {
32
+        const Comp = this.props.component;
33
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
34
+        return (
35
+            <Comp
36
+                {...this.props}
37
+                onScroll={onScrollWithListener(this.onScroll)}
38
+                contentContainerStyle={{
39
+                    paddingTop: containerPaddingTop,
40
+                    paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
41
+                    minHeight: '100%'
42
+                }}
43
+                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
44
+            >
45
+                {this.props.children}
46
+            </Comp>
47
+        );
48
+    }
49
+}
50
+
51
+export default withCollapsible(CollapsibleComponent);

+ 26
- 0
src/components/Collapsible/CollapsibleFlatList.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleFlatList extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.FlatList}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleFlatList;

+ 26
- 0
src/components/Collapsible/CollapsibleScrollView.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleScrollView extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.ScrollView}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleScrollView;

+ 26
- 0
src/components/Collapsible/CollapsibleSectionList.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Animated} from "react-native";
5
+import type {CollapsibleComponentProps} from "./CollapsibleComponent";
6
+import CollapsibleComponent from "./CollapsibleComponent";
7
+
8
+type Props = {
9
+    ...CollapsibleComponentProps
10
+}
11
+
12
+class CollapsibleSectionList extends React.Component<Props> {
13
+
14
+    render() {
15
+        return (
16
+            <CollapsibleComponent
17
+                {...this.props}
18
+                component={Animated.SectionList}
19
+            >
20
+                {this.props.children}
21
+            </CollapsibleComponent>
22
+        );
23
+    }
24
+}
25
+
26
+export default CollapsibleSectionList;

+ 6
- 11
src/components/Screens/WebSectionList.js View File

4
 import {ERROR_TYPE, readData} from "../../utils/WebData";
4
 import {ERROR_TYPE, readData} from "../../utils/WebData";
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import {Snackbar} from 'react-native-paper';
6
 import {Snackbar} from 'react-native-paper';
7
-import {Animated, RefreshControl, View} from "react-native";
7
+import {RefreshControl, View} from "react-native";
8
 import ErrorView from "./ErrorView";
8
 import ErrorView from "./ErrorView";
9
 import BasicLoadingScreen from "./BasicLoadingScreen";
9
 import BasicLoadingScreen from "./BasicLoadingScreen";
10
 import {withCollapsible} from "../../utils/withCollapsible";
10
 import {withCollapsible} from "../../utils/withCollapsible";
12
 import CustomTabBar from "../Tabbar/CustomTabBar";
12
 import CustomTabBar from "../Tabbar/CustomTabBar";
13
 import {Collapsible} from "react-navigation-collapsible";
13
 import {Collapsible} from "react-navigation-collapsible";
14
 import {StackNavigationProp} from "@react-navigation/stack";
14
 import {StackNavigationProp} from "@react-navigation/stack";
15
+import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
15
 
16
 
16
 type Props = {
17
 type Props = {
17
     navigation: StackNavigationProp,
18
     navigation: StackNavigationProp,
203
         if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
204
         if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
204
             dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
205
             dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
205
         }
206
         }
206
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
207
+        const {containerPaddingTop} = this.props.collapsibleStack;
207
         return (
208
         return (
208
             <View>
209
             <View>
209
-                <Animated.SectionList
210
+                <CollapsibleSectionList
210
                     sections={dataset}
211
                     sections={dataset}
211
                     extraData={this.props.updateData}
212
                     extraData={this.props.updateData}
212
                     refreshControl={
213
                     refreshControl={
231
                             onRefresh={this.onRefresh}/>
232
                             onRefresh={this.onRefresh}/>
232
                     }
233
                     }
233
                     getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
234
                     getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
234
-                    // Animations
235
-                    onScroll={onScrollWithListener(this.onScroll)}
236
-                    contentContainerStyle={{
237
-                        paddingTop: containerPaddingTop,
238
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
239
-                        minHeight: '100%'
240
-                    }}
241
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
235
+                    onScroll={this.onScroll}
236
+                    hasTab={true}
242
                 />
237
                 />
243
                 <Snackbar
238
                 <Snackbar
244
                     visible={this.state.snackbarVisible}
239
                     visible={this.state.snackbarVisible}

+ 106
- 102
src/navigation/MainNavigator.js View File

28
 import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
28
 import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
29
 import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
29
 import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
30
 import GameStartScreen from "../screens/Game/screens/GameStartScreen";
30
 import GameStartScreen from "../screens/Game/screens/GameStartScreen";
31
-import GameEndScreen from "../screens/Game/screens/GameEndScreen";
32
 
31
 
33
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
32
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
34
 
33
 
35
-const screenTransition = TransitionPresets.SlideFromRightIOS;
36
-
37
 const defaultScreenOptions = {
34
 const defaultScreenOptions = {
38
     gestureEnabled: true,
35
     gestureEnabled: true,
39
     cardOverlayEnabled: true,
36
     cardOverlayEnabled: true,
40
-    ...screenTransition,
37
+    ...TransitionPresets.SlideFromRightIOS,
41
 };
38
 };
42
 
39
 
43
 
40
 
58
                     title: i18n.t('screens.home.title'),
55
                     title: i18n.t('screens.home.title'),
59
                 }}
56
                 }}
60
             />
57
             />
61
-            <MainStack.Screen
62
-                name="settings"
63
-                component={SettingsScreen}
64
-                options={{
65
-                    title: i18n.t('screens.settings.title'),
66
-                }}
67
-            />
68
-            <MainStack.Screen
69
-                name="dashboard-edit"
70
-                component={DashboardEditScreen}
71
-                options={{
72
-                    title: i18n.t('screens.settings.dashboardEdit.title'),
73
-                }}
74
-            />
75
-            <MainStack.Screen
76
-                name="about"
77
-                component={AboutScreen}
78
-                options={{
79
-                    title: i18n.t('screens.about.title'),
80
-                }}
81
-            />
82
-            <MainStack.Screen
83
-                name="dependencies"
84
-                component={AboutDependenciesScreen}
85
-                options={{
86
-                    title: i18n.t('screens.about.libs')
87
-                }}
88
-            />
89
-            <MainStack.Screen
90
-                name="debug"
91
-                component={DebugScreen}
92
-                options={{
93
-                    title: i18n.t('screens.about.debug')
94
-                }}
95
-            />
96
-            <MainStack.Screen
97
-                name="game-start"
98
-                component={GameStartScreen}
99
-                options={{
100
-                    title: i18n.t("screens.game.title"),
101
-                }}
102
-            />
58
+            {createScreenCollapsibleStack(
59
+                "settings",
60
+                MainStack,
61
+                SettingsScreen,
62
+                i18n.t('screens.settings.title'))}
63
+            {createScreenCollapsibleStack(
64
+                "dashboard-edit",
65
+                MainStack,
66
+                DashboardEditScreen,
67
+                i18n.t('screens.settings.dashboardEdit.title'))}
68
+            {createScreenCollapsibleStack(
69
+                "about",
70
+                MainStack,
71
+                AboutScreen,
72
+                i18n.t('screens.about.title'))}
73
+            {createScreenCollapsibleStack(
74
+                "dependencies",
75
+                MainStack,
76
+                AboutDependenciesScreen,
77
+                i18n.t('screens.about.libs'))}
78
+            {createScreenCollapsibleStack(
79
+                "debug",
80
+                MainStack,
81
+                DebugScreen,
82
+                i18n.t('screens.about.debug'))}
83
+
84
+            {createScreenCollapsibleStack(
85
+                "game-start",
86
+                MainStack,
87
+                GameStartScreen,
88
+                i18n.t('screens.game.title'))}
103
             <MainStack.Screen
89
             <MainStack.Screen
104
                 name="game-main"
90
                 name="game-main"
105
                 component={GameMainScreen}
91
                 component={GameMainScreen}
107
                     title: i18n.t("screens.game.title"),
93
                     title: i18n.t("screens.game.title"),
108
                 }}
94
                 }}
109
             />
95
             />
110
-            <MainStack.Screen
111
-                name="game-end"
112
-                component={GameEndScreen}
113
-                options={{
114
-                    title: i18n.t("screens.game.title"),
115
-                }}
116
-            />
117
-            {createScreenCollapsibleStack("login", MainStack, LoginScreen, i18n.t('screens.login.title'),
118
-                true, {headerTintColor: "#fff"}, 'transparent')}
96
+            {createScreenCollapsibleStack(
97
+                "login",
98
+                MainStack,
99
+                LoginScreen,
100
+                i18n.t('screens.login.title'),
101
+                true,
102
+                {headerTintColor: "#fff"},
103
+                'transparent')}
119
             {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
104
             {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
120
 
105
 
121
 
106
 
122
-            {createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menu.title'))}
123
-            {createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo.title'))}
107
+            {createScreenCollapsibleStack(
108
+                "self-menu",
109
+                MainStack,
110
+                SelfMenuScreen,
111
+                i18n.t('screens.menu.title'))}
112
+            {createScreenCollapsibleStack(
113
+                "proximo",
114
+                MainStack,
115
+                ProximoMainScreen,
116
+                i18n.t('screens.proximo.title'))}
124
             {createScreenCollapsibleStack(
117
             {createScreenCollapsibleStack(
125
                 "proximo-list",
118
                 "proximo-list",
126
                 MainStack,
119
                 MainStack,
127
                 ProximoListScreen,
120
                 ProximoListScreen,
128
                 i18n.t('screens.proximo.articleList'),
121
                 i18n.t('screens.proximo.articleList'),
122
+            )}
123
+            {createScreenCollapsibleStack(
124
+                "proximo-about",
125
+                MainStack,
126
+                ProximoAboutScreen,
127
+                i18n.t('screens.proximo.title'),
129
                 true,
128
                 true,
130
-                {...screenTransition},
129
+                {...modalTransition},
131
             )}
130
             )}
132
-            <MainStack.Screen
133
-                name="proximo-about"
134
-                component={ProximoAboutScreen}
135
-                options={{
136
-                    title: i18n.t('screens.proximo.title'),
137
-                    ...modalTransition,
138
-                }}
139
-            />
140
-
141
-            {createScreenCollapsibleStack("profile", MainStack, ProfileScreen, i18n.t('screens.profile.title'))}
142
-            {createScreenCollapsibleStack("club-list", MainStack, ClubListScreen, i18n.t('screens.clubs.title'))}
143
-            {createScreenCollapsibleStack("equipment-list", MainStack, EquipmentScreen, i18n.t('screens.equipment.title'))}
144
-            {createScreenCollapsibleStack("equipment-rent", MainStack, EquipmentLendScreen, i18n.t('screens.equipment.book'))}
145
-            {createScreenCollapsibleStack("equipment-confirm", MainStack, EquipmentConfirmScreen, i18n.t('screens.equipment.confirm'))}
146
-            <MainStack.Screen
147
-                name="club-information"
148
-                component={ClubDisplayScreen}
149
-                options={{
150
-                    title: i18n.t('screens.clubs.details'),
151
-                    ...modalTransition,
152
-                }}
153
-            />
154
-            <MainStack.Screen
155
-                name="club-about"
156
-                component={ClubAboutScreen}
157
-                options={{
158
-                    title: i18n.t('screens.clubs.title'),
159
-                    ...modalTransition,
160
-                }}
161
-            />
162
-            <MainStack.Screen
163
-                name="vote"
164
-                component={VoteScreen}
165
-                options={{
166
-                    title: i18n.t('screens.vote.title'),
167
-                }}
168
-            />
169
 
131
 
170
-            <MainStack.Screen
171
-                name="feedback"
172
-                component={BugReportScreen}
173
-                options={{
174
-                    title: i18n.t('screens.feedback.title'),
175
-                }}
176
-            />
132
+            {createScreenCollapsibleStack(
133
+                "profile",
134
+                MainStack,
135
+                ProfileScreen,
136
+                i18n.t('screens.profile.title'))}
137
+            {createScreenCollapsibleStack(
138
+                "club-list",
139
+                MainStack,
140
+                ClubListScreen,
141
+                i18n.t('screens.clubs.title'))}
142
+            {createScreenCollapsibleStack(
143
+                "club-information",
144
+                MainStack,
145
+                ClubDisplayScreen,
146
+                i18n.t('screens.clubs.details'),
147
+                true,
148
+                {...modalTransition})}
149
+            {createScreenCollapsibleStack(
150
+                "club-about",
151
+                MainStack,
152
+                ClubAboutScreen,
153
+                i18n.t('screens.clubs.title'),
154
+                true,
155
+                {...modalTransition})}
156
+            {createScreenCollapsibleStack(
157
+                "equipment-list",
158
+                MainStack,
159
+                EquipmentScreen,
160
+                i18n.t('screens.equipment.title'))}
161
+            {createScreenCollapsibleStack(
162
+                "equipment-rent",
163
+                MainStack,
164
+                EquipmentLendScreen,
165
+                i18n.t('screens.equipment.book'))}
166
+            {createScreenCollapsibleStack(
167
+                "equipment-confirm",
168
+                MainStack,
169
+                EquipmentConfirmScreen,
170
+                i18n.t('screens.equipment.confirm'))}
171
+            {createScreenCollapsibleStack(
172
+                "vote",
173
+                MainStack,
174
+                VoteScreen,
175
+                i18n.t('screens.vote.title'))}
176
+            {createScreenCollapsibleStack(
177
+                "feedback",
178
+                MainStack,
179
+                BugReportScreen,
180
+                i18n.t('screens.feedback.title'))}
177
         </MainStack.Navigator>
181
         </MainStack.Navigator>
178
     );
182
     );
179
 }
183
 }

+ 12
- 9
src/screens/About/AboutDependenciesScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {FlatList} from "react-native";
5
 import packageJson from '../../../package';
4
 import packageJson from '../../../package';
6
 import {List} from 'react-native-paper';
5
 import {List} from 'react-native-paper';
7
 import {StackNavigationProp} from "@react-navigation/stack";
6
 import {StackNavigationProp} from "@react-navigation/stack";
7
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
8
+import {View} from "react-native-animatable";
8
 
9
 
9
 type listItem = {
10
 type listItem = {
10
     name: string,
11
     name: string,
59
 
60
 
60
     render() {
61
     render() {
61
         return (
62
         return (
62
-            <FlatList
63
-                data={this.data}
64
-                keyExtractor={this.keyExtractor}
65
-                renderItem={this.renderItem}
66
-                // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
67
-                removeClippedSubviews={true}
68
-                getItemLayout={this.itemLayout}
69
-            />
63
+            <View>
64
+                <CollapsibleFlatList
65
+                    data={this.data}
66
+                    keyExtractor={this.keyExtractor}
67
+                    renderItem={this.renderItem}
68
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
69
+                    removeClippedSubviews={true}
70
+                    getItemLayout={this.itemLayout}
71
+                />
72
+            </View>
70
         );
73
         );
71
     }
74
     }
72
 }
75
 }

+ 2
- 1
src/screens/About/AboutScreen.js View File

6
 import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
6
 import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
7
 import packageJson from "../../../package.json";
7
 import packageJson from "../../../package.json";
8
 import {StackNavigationProp} from "@react-navigation/stack";
8
 import {StackNavigationProp} from "@react-navigation/stack";
9
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
9
 
10
 
10
 type ListItem = {
11
 type ListItem = {
11
     onPressCallback: () => void,
12
     onPressCallback: () => void,
338
 
339
 
339
     render() {
340
     render() {
340
         return (
341
         return (
341
-            <FlatList
342
+            <CollapsibleFlatList
342
                 style={{padding: 5}}
343
                 style={{padding: 5}}
343
                 data={this.dataOrder}
344
                 data={this.dataOrder}
344
                 renderItem={this.getMainCard}
345
                 renderItem={this.getMainCard}

+ 3
- 2
src/screens/About/DebugScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {FlatList, View} from "react-native";
4
+import {View} from "react-native";
5
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
5
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
6
 import CustomModal from "../../components/Overrides/CustomModal";
6
 import CustomModal from "../../components/Overrides/CustomModal";
7
 import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
7
 import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
8
 import {StackNavigationProp} from "@react-navigation/stack";
8
 import {StackNavigationProp} from "@react-navigation/stack";
9
 import {Modalize} from "react-native-modalize";
9
 import {Modalize} from "react-native-modalize";
10
 import type {CustomTheme} from "../../managers/ThemeManager";
10
 import type {CustomTheme} from "../../managers/ThemeManager";
11
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
11
 
12
 
12
 type PreferenceItem = {
13
 type PreferenceItem = {
13
     key: string,
14
     key: string,
168
                     {this.getModalContent()}
169
                     {this.getModalContent()}
169
                 </CustomModal>
170
                 </CustomModal>
170
                 {/*$FlowFixMe*/}
171
                 {/*$FlowFixMe*/}
171
-                <FlatList
172
+                <CollapsibleFlatList
172
                     data={this.state.currentPreferences}
173
                     data={this.state.currentPreferences}
173
                     extraData={this.state.currentPreferences}
174
                     extraData={this.state.currentPreferences}
174
                     renderItem={this.renderItem}
175
                     renderItem={this.renderItem}

+ 5
- 16
src/screens/Amicale/AmicaleContactScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, FlatList, Image, Linking, View} from 'react-native';
4
+import {FlatList, Image, Linking, View} from 'react-native';
5
 import {Card, List, Text, withTheme} from 'react-native-paper';
5
 import {Card, List, Text, withTheme} from 'react-native-paper';
6
 import i18n from 'i18n-js';
6
 import i18n from 'i18n-js';
7
-import {Collapsible} from "react-navigation-collapsible";
8
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
9
-import {withCollapsible} from "../../utils/withCollapsible";
10
 import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
7
 import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
8
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
11
 
9
 
12
 type Props = {
10
 type Props = {
13
-    collapsibleStack: Collapsible
14
 };
11
 };
15
 
12
 
16
 type DatasetItem = {
13
 type DatasetItem = {
130
     };
127
     };
131
 
128
 
132
     render() {
129
     render() {
133
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
134
         return (
130
         return (
135
-            <Animated.FlatList
131
+            <CollapsibleFlatList
136
                 data={[{key: "1"}]}
132
                 data={[{key: "1"}]}
137
                 renderItem={this.getScreen}
133
                 renderItem={this.getScreen}
138
-                // Animations
139
-                onScroll={onScroll}
140
-                contentContainerStyle={{
141
-                    paddingTop: containerPaddingTop,
142
-                    paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
143
-                    minHeight: '100%'
144
-                }}
145
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
134
+                hasTab={true}
146
             />
135
             />
147
         );
136
         );
148
     }
137
     }
149
 }
138
 }
150
 
139
 
151
-export default withCollapsible(withTheme(AmicaleContactScreen));
140
+export default withTheme(AmicaleContactScreen);

+ 4
- 3
src/screens/Amicale/Clubs/ClubAboutScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, View} from 'react-native';
5
 import {Card, List, Text, withTheme} from 'react-native-paper';
5
 import {Card, List, Text, withTheme} from 'react-native-paper';
6
 import i18n from 'i18n-js';
6
 import i18n from 'i18n-js';
7
 import Autolink from "react-native-autolink";
7
 import Autolink from "react-native-autolink";
8
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
8
 
9
 
9
 type Props = {};
10
 type Props = {};
10
 
11
 
14
 
15
 
15
     render() {
16
     render() {
16
         return (
17
         return (
17
-            <ScrollView style={{padding: 5}}>
18
+            <CollapsibleScrollView style={{padding: 5}}>
18
                 <View style={{
19
                 <View style={{
19
                     width: '100%',
20
                     width: '100%',
20
                     height: 100,
21
                     height: 100,
43
                         />
44
                         />
44
                     </Card.Content>
45
                     </Card.Content>
45
                 </Card>
46
                 </Card>
46
-            </ScrollView>
47
+            </CollapsibleScrollView>
47
         );
48
         );
48
     }
49
     }
49
 }
50
 }

+ 7
- 3
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Linking, ScrollView, View} from 'react-native';
4
+import {Linking, View} from 'react-native';
5
 import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
5
 import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
6
 import ImageModal from 'react-native-image-modal';
6
 import ImageModal from 'react-native-image-modal';
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
12
 import type {CustomTheme} from "../../../managers/ThemeManager";
12
 import type {CustomTheme} from "../../../managers/ThemeManager";
13
 import {StackNavigationProp} from "@react-navigation/stack";
13
 import {StackNavigationProp} from "@react-navigation/stack";
14
 import {ERROR_TYPE} from "../../../utils/WebData";
14
 import {ERROR_TYPE} from "../../../utils/WebData";
15
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
15
 
16
 
16
 type Props = {
17
 type Props = {
17
     navigation: StackNavigationProp,
18
     navigation: StackNavigationProp,
184
         }
185
         }
185
         if (data != null) {
186
         if (data != null) {
186
             return (
187
             return (
187
-                <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
188
+                <CollapsibleScrollView
189
+                    style={{paddingLeft: 5, paddingRight: 5}}
190
+                    hasTab={true}
191
+                >
188
                     {this.getCategoriesRender(data.category)}
192
                     {this.getCategoriesRender(data.category)}
189
                     {data.logo !== null ?
193
                     {data.logo !== null ?
190
                         <View style={{
194
                         <View style={{
214
                         </Card.Content>
218
                         </Card.Content>
215
                         : <View/>}
219
                         : <View/>}
216
                     {this.getManagersRender(data.responsibles, data.email)}
220
                     {this.getManagersRender(data.responsibles, data.email)}
217
-                </ScrollView>
221
+                </CollapsibleScrollView>
218
             );
222
             );
219
         } else
223
         } else
220
             return null;
224
             return null;

+ 4
- 11
src/screens/Amicale/Clubs/ClubListScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, Platform} from "react-native";
4
+import {Platform} from "react-native";
5
 import {Searchbar} from 'react-native-paper';
5
 import {Searchbar} from 'react-native-paper';
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
9
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
9
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
10
 import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
10
 import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
11
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
11
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
12
-import {withCollapsible} from "../../../utils/withCollapsible";
13
 import {StackNavigationProp} from "@react-navigation/stack";
12
 import {StackNavigationProp} from "@react-navigation/stack";
14
 import type {CustomTheme} from "../../../managers/ThemeManager";
13
 import type {CustomTheme} from "../../../managers/ThemeManager";
15
-import {Collapsible} from "react-navigation-collapsible";
14
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
16
 
15
 
17
 export type category = {
16
 export type category = {
18
     id: number,
17
     id: number,
32
 type Props = {
31
 type Props = {
33
     navigation: StackNavigationProp,
32
     navigation: StackNavigationProp,
34
     theme: CustomTheme,
33
     theme: CustomTheme,
35
-    collapsibleStack: Collapsible,
36
 }
34
 }
37
 
35
 
38
 type State = {
36
 type State = {
111
             clubList = data[0].clubs;
109
             clubList = data[0].clubs;
112
         }
110
         }
113
         this.categories = categoryList;
111
         this.categories = categoryList;
114
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
115
         return (
112
         return (
116
-            <Animated.FlatList
113
+            <CollapsibleFlatList
117
                 data={clubList}
114
                 data={clubList}
118
                 keyExtractor={this.keyExtractor}
115
                 keyExtractor={this.keyExtractor}
119
                 renderItem={this.getRenderItem}
116
                 renderItem={this.getRenderItem}
121
                 // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
118
                 // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
122
                 removeClippedSubviews={true}
119
                 removeClippedSubviews={true}
123
                 getItemLayout={this.itemLayout}
120
                 getItemLayout={this.itemLayout}
124
-                // Animations
125
-                onScroll={onScroll}
126
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
127
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
128
             />
121
             />
129
         )
122
         )
130
     };
123
     };
241
     }
234
     }
242
 }
235
 }
243
 
236
 
244
-export default withCollapsible(ClubListScreen);
237
+export default ClubListScreen;

+ 5
- 15
src/screens/Amicale/Equipment/EquipmentConfirmScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
4
 import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
5
-import {Collapsible} from "react-navigation-collapsible";
6
-import {withCollapsible} from "../../../utils/withCollapsible";
7
 import {StackNavigationProp} from "@react-navigation/stack";
5
 import {StackNavigationProp} from "@react-navigation/stack";
8
 import type {CustomTheme} from "../../../managers/ThemeManager";
6
 import type {CustomTheme} from "../../../managers/ThemeManager";
9
 import type {Device} from "./EquipmentListScreen";
7
 import type {Device} from "./EquipmentListScreen";
10
-import {Animated, View} from "react-native";
8
+import {View} from "react-native";
11
 import i18n from "i18n-js";
9
 import i18n from "i18n-js";
12
 import {getRelativeDateString} from "../../../utils/EquipmentBooking";
10
 import {getRelativeDateString} from "../../../utils/EquipmentBooking";
11
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
13
 
12
 
14
 type Props = {
13
 type Props = {
15
     navigation: StackNavigationProp,
14
     navigation: StackNavigationProp,
20
         },
19
         },
21
     },
20
     },
22
     theme: CustomTheme,
21
     theme: CustomTheme,
23
-    collapsibleStack: Collapsible,
24
 }
22
 }
25
 
23
 
26
 
24
 
44
     }
42
     }
45
 
43
 
46
     render() {
44
     render() {
47
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
48
         const item = this.item;
45
         const item = this.item;
49
         const dates = this.dates;
46
         const dates = this.dates;
50
         if (item != null && dates != null) {
47
         if (item != null && dates != null) {
51
             const start = new Date(dates[0]);
48
             const start = new Date(dates[0]);
52
             const end = new Date(dates[1]);
49
             const end = new Date(dates[1]);
53
             return (
50
             return (
54
-                <Animated.ScrollView
55
-                    // Animations
56
-                    onScroll={onScroll}
57
-                    contentContainerStyle={{
58
-                        paddingTop: containerPaddingTop,
59
-                        minHeight: '100%'
60
-                    }}
61
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
51
+                <CollapsibleScrollView>
62
                     <Card style={{margin: 5}}>
52
                     <Card style={{margin: 5}}>
63
                         <Card.Content>
53
                         <Card.Content>
64
                             <View style={{flex: 1}}>
54
                             <View style={{flex: 1}}>
103
                             </Paragraph>
93
                             </Paragraph>
104
                         </Card.Content>
94
                         </Card.Content>
105
                     </Card>
95
                     </Card>
106
-                </Animated.ScrollView>
96
+                </CollapsibleScrollView>
107
             );
97
             );
108
         } else
98
         } else
109
             return null;
99
             return null;
112
 
102
 
113
 }
103
 }
114
 
104
 
115
-export default withCollapsible(withTheme(EquipmentConfirmScreen));
105
+export default withTheme(EquipmentConfirmScreen);

+ 5
- 15
src/screens/Amicale/Equipment/EquipmentListScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, View} from "react-native";
4
+import {View} from "react-native";
5
 import {Button, withTheme} from 'react-native-paper';
5
 import {Button, withTheme} from 'react-native-paper';
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7
-import {Collapsible} from "react-navigation-collapsible";
8
-import {withCollapsible} from "../../../utils/withCollapsible";
9
 import {StackNavigationProp} from "@react-navigation/stack";
7
 import {StackNavigationProp} from "@react-navigation/stack";
10
 import type {CustomTheme} from "../../../managers/ThemeManager";
8
 import type {CustomTheme} from "../../../managers/ThemeManager";
11
 import i18n from "i18n-js";
9
 import i18n from "i18n-js";
14
 import MascotPopup from "../../../components/Mascot/MascotPopup";
12
 import MascotPopup from "../../../components/Mascot/MascotPopup";
15
 import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
13
 import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
16
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
14
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
15
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
17
 
16
 
18
 type Props = {
17
 type Props = {
19
     navigation: StackNavigationProp,
18
     navigation: StackNavigationProp,
20
     theme: CustomTheme,
19
     theme: CustomTheme,
21
-    collapsibleStack: Collapsible,
22
 }
20
 }
23
 
21
 
24
 type State = {
22
 type State = {
29
     id: number,
27
     id: number,
30
     name: string,
28
     name: string,
31
     caution: number,
29
     caution: number,
32
-    booked_at: Array<{begin: string, end: string}>,
30
+    booked_at: Array<{ begin: string, end: string }>,
33
 };
31
 };
34
 
32
 
35
 export type RentedDevice = {
33
 export type RentedDevice = {
133
             if (fetchedData != null)
131
             if (fetchedData != null)
134
                 this.userRents = fetchedData["locations"];
132
                 this.userRents = fetchedData["locations"];
135
         }
133
         }
136
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
137
         return (
134
         return (
138
-            <Animated.FlatList
135
+            <CollapsibleFlatList
139
                 keyExtractor={this.keyExtractor}
136
                 keyExtractor={this.keyExtractor}
140
                 renderItem={this.getRenderItem}
137
                 renderItem={this.getRenderItem}
141
                 ListHeaderComponent={this.getListHeader()}
138
                 ListHeaderComponent={this.getListHeader()}
142
                 data={this.data}
139
                 data={this.data}
143
-                // Animations
144
-                onScroll={onScroll}
145
-                contentContainerStyle={{
146
-                    paddingTop: containerPaddingTop,
147
-                    minHeight: '100%'
148
-                }}
149
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
150
             />
140
             />
151
         )
141
         )
152
     };
142
     };
203
     }
193
     }
204
 }
194
 }
205
 
195
 
206
-export default withCollapsible(withTheme(EquipmentListScreen));
196
+export default withTheme(EquipmentListScreen);

+ 5
- 16
src/screens/Amicale/Equipment/EquipmentRentScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
4
 import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
5
-import {Collapsible} from "react-navigation-collapsible";
6
-import {withCollapsible} from "../../../utils/withCollapsible";
7
 import {StackNavigationProp} from "@react-navigation/stack";
5
 import {StackNavigationProp} from "@react-navigation/stack";
8
 import type {CustomTheme} from "../../../managers/ThemeManager";
6
 import type {CustomTheme} from "../../../managers/ThemeManager";
9
 import type {Device} from "./EquipmentListScreen";
7
 import type {Device} from "./EquipmentListScreen";
10
-import {Animated, BackHandler, View} from "react-native";
8
+import {BackHandler, View} from "react-native";
11
 import * as Animatable from "react-native-animatable";
9
 import * as Animatable from "react-native-animatable";
12
 import i18n from "i18n-js";
10
 import i18n from "i18n-js";
13
 import {CalendarList} from "react-native-calendars";
11
 import {CalendarList} from "react-native-calendars";
22
     isEquipmentAvailable
20
     isEquipmentAvailable
23
 } from "../../../utils/EquipmentBooking";
21
 } from "../../../utils/EquipmentBooking";
24
 import ConnectionManager from "../../../managers/ConnectionManager";
22
 import ConnectionManager from "../../../managers/ConnectionManager";
23
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
25
 
24
 
26
 type Props = {
25
 type Props = {
27
     navigation: StackNavigationProp,
26
     navigation: StackNavigationProp,
31
         },
30
         },
32
     },
31
     },
33
     theme: CustomTheme,
32
     theme: CustomTheme,
34
-    collapsibleStack: Collapsible,
35
 }
33
 }
36
 
34
 
37
 type State = {
35
 type State = {
269
     }
267
     }
270
 
268
 
271
     render() {
269
     render() {
272
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
273
-
274
         const item = this.item;
270
         const item = this.item;
275
         const start = this.getBookStartDate();
271
         const start = this.getBookStartDate();
276
         const end = this.getBookEndDate();
272
         const end = this.getBookEndDate();
280
             const firstAvailability = getFirstEquipmentAvailability(item);
276
             const firstAvailability = getFirstEquipmentAvailability(item);
281
             return (
277
             return (
282
                 <View style={{flex: 1}}>
278
                 <View style={{flex: 1}}>
283
-                    <Animated.ScrollView
284
-                        // Animations
285
-                        onScroll={onScroll}
286
-                        contentContainerStyle={{
287
-                            paddingTop: containerPaddingTop,
288
-                            minHeight: '100%'
289
-                        }}
290
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
279
+                    <CollapsibleScrollView>
291
                         <Card style={{margin: 5}}>
280
                         <Card style={{margin: 5}}>
292
                             <Card.Content>
281
                             <Card.Content>
293
                                 <View style={{flex: 1}}>
282
                                 <View style={{flex: 1}}>
396
                             }}
385
                             }}
397
                             style={{marginBottom: 50}}
386
                             style={{marginBottom: 50}}
398
                         />
387
                         />
399
-                    </Animated.ScrollView>
388
+                    </CollapsibleScrollView>
400
                     <LoadingConfirmDialog
389
                     <LoadingConfirmDialog
401
                         visible={this.state.dialogVisible}
390
                         visible={this.state.dialogVisible}
402
                         onDismiss={this.onDialogDismiss}
391
                         onDismiss={this.onDialogDismiss}
449
 
438
 
450
 }
439
 }
451
 
440
 
452
-export default withCollapsible(withTheme(EquipmentRentScreen));
441
+export default withTheme(EquipmentRentScreen);

+ 13
- 24
src/screens/Amicale/LoginScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
4
+import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
5
 import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
5
 import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
6
 import ConnectionManager from "../../managers/ConnectionManager";
6
 import ConnectionManager from "../../managers/ConnectionManager";
7
 import i18n from 'i18n-js';
7
 import i18n from 'i18n-js';
8
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
8
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
9
-import {withCollapsible} from "../../utils/withCollapsible";
10
-import {Collapsible} from "react-navigation-collapsible";
11
 import type {CustomTheme} from "../../managers/ThemeManager";
9
 import type {CustomTheme} from "../../managers/ThemeManager";
12
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
10
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
13
 import {StackNavigationProp} from "@react-navigation/stack";
11
 import {StackNavigationProp} from "@react-navigation/stack";
15
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
13
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
16
 import MascotPopup from "../../components/Mascot/MascotPopup";
14
 import MascotPopup from "../../components/Mascot/MascotPopup";
17
 import LinearGradient from "react-native-linear-gradient";
15
 import LinearGradient from "react-native-linear-gradient";
16
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
18
 
17
 
19
 type Props = {
18
 type Props = {
20
     navigation: StackNavigationProp,
19
     navigation: StackNavigationProp,
21
     route: { params: { nextScreen: string } },
20
     route: { params: { nextScreen: string } },
22
-    collapsibleStack: Collapsible,
23
     theme: CustomTheme
21
     theme: CustomTheme
24
 }
22
 }
25
 
23
 
56
     onEmailChange: (value: string) => null;
54
     onEmailChange: (value: string) => null;
57
     onPasswordChange: (value: string) => null;
55
     onPasswordChange: (value: string) => null;
58
     passwordInputRef: { current: null | TextInput };
56
     passwordInputRef: { current: null | TextInput };
59
-    windowHeight: number;
60
 
57
 
61
     nextScreen: string | null;
58
     nextScreen: string | null;
62
 
59
 
66
         this.onEmailChange = this.onInputChange.bind(this, true);
63
         this.onEmailChange = this.onInputChange.bind(this, true);
67
         this.onPasswordChange = this.onInputChange.bind(this, false);
64
         this.onPasswordChange = this.onInputChange.bind(this, false);
68
         this.props.navigation.addListener('focus', this.onScreenFocus);
65
         this.props.navigation.addListener('focus', this.onScreenFocus);
69
-        this.windowHeight = Dimensions.get('window').height;
70
     }
66
     }
71
 
67
 
72
     onScreenFocus = () => {
68
     onScreenFocus = () => {
323
                     {this.getFormInput()}
319
                     {this.getFormInput()}
324
                     <Card.Actions style={{flexWrap: "wrap"}}>
320
                     <Card.Actions style={{flexWrap: "wrap"}}>
325
                         <Button
321
                         <Button
326
-                        icon="lock-question"
327
-                        mode="contained"
328
-                        onPress={this.onResetPasswordClick}
329
-                        color={this.props.theme.colors.warning}
330
-                        style={{marginRight: 'auto', marginBottom: 20}}>
331
-                        {i18n.t("screens.login.resetPassword")}
332
-                    </Button>
322
+                            icon="lock-question"
323
+                            mode="contained"
324
+                            onPress={this.onResetPasswordClick}
325
+                            color={this.props.theme.colors.warning}
326
+                            style={{marginRight: 'auto', marginBottom: 20}}>
327
+                            {i18n.t("screens.login.resetPassword")}
328
+                        </Button>
333
                         <Button
329
                         <Button
334
                             icon="send"
330
                             icon="send"
335
                             mode="contained"
331
                             mode="contained"
359
     }
355
     }
360
 
356
 
361
     render() {
357
     render() {
362
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
363
         return (
358
         return (
364
             <LinearGradient
359
             <LinearGradient
365
                 style={{
360
                 style={{
375
                     enabled
370
                     enabled
376
                     keyboardVerticalOffset={100}
371
                     keyboardVerticalOffset={100}
377
                 >
372
                 >
378
-                    <Animated.ScrollView
379
-                        onScroll={onScroll}
380
-                        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
381
-                        style={{flex: 1}}
382
-                    >
383
-                        <View style={{height: this.windowHeight - containerPaddingTop}}>
373
+                    <CollapsibleScrollView>
374
+                        <View style={{height: "100%"}}>
384
                             {this.getMainCard()}
375
                             {this.getMainCard()}
385
                         </View>
376
                         </View>
386
-
387
-
388
                         <MascotPopup
377
                         <MascotPopup
389
                             visible={this.state.mascotDialogVisible}
378
                             visible={this.state.mascotDialogVisible}
390
                             title={i18n.t("screens.login.mascotDialog.title")}
379
                             title={i18n.t("screens.login.mascotDialog.title")}
405
                             onDismiss={this.hideErrorDialog}
394
                             onDismiss={this.hideErrorDialog}
406
                             errorCode={this.state.dialogError}
395
                             errorCode={this.state.dialogError}
407
                         />
396
                         />
408
-                    </Animated.ScrollView>
397
+                    </CollapsibleScrollView>
409
                 </KeyboardAvoidingView>
398
                 </KeyboardAvoidingView>
410
             </LinearGradient>
399
             </LinearGradient>
411
         );
400
         );
431
     }
420
     }
432
 });
421
 });
433
 
422
 
434
-export default withCollapsible(withTheme(LoginScreen));
423
+export default withTheme(LoginScreen);

+ 4
- 16
src/screens/Amicale/ProfileScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, FlatList, StyleSheet, View} from "react-native";
4
+import {FlatList, StyleSheet, View} from "react-native";
5
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
5
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7
 import i18n from 'i18n-js';
7
 import i18n from 'i18n-js';
8
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
8
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
9
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
9
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
10
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
11
-import {Collapsible} from "react-navigation-collapsible";
12
-import {withCollapsible} from "../../utils/withCollapsible";
13
 import type {cardList} from "../../components/Lists/CardList/CardList";
10
 import type {cardList} from "../../components/Lists/CardList/CardList";
14
 import CardList from "../../components/Lists/CardList/CardList";
11
 import CardList from "../../components/Lists/CardList/CardList";
15
 import {StackNavigationProp} from "@react-navigation/stack";
12
 import {StackNavigationProp} from "@react-navigation/stack";
17
 import AvailableWebsites from "../../constants/AvailableWebsites";
14
 import AvailableWebsites from "../../constants/AvailableWebsites";
18
 import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
15
 import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
19
 import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
16
 import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
17
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
20
 
18
 
21
 type Props = {
19
 type Props = {
22
     navigation: StackNavigationProp,
20
     navigation: StackNavigationProp,
23
     theme: CustomTheme,
21
     theme: CustomTheme,
24
-    collapsibleStack: Collapsible,
25
 }
22
 }
26
 
23
 
27
 type State = {
24
 type State = {
97
         if (data[0] != null) {
94
         if (data[0] != null) {
98
             this.data = data[0];
95
             this.data = data[0];
99
         }
96
         }
100
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
101
         return (
97
         return (
102
             <View style={{flex: 1}}>
98
             <View style={{flex: 1}}>
103
-                <Animated.FlatList
99
+                <CollapsibleFlatList
104
                     renderItem={this.getRenderItem}
100
                     renderItem={this.getRenderItem}
105
                     data={this.flatListData}
101
                     data={this.flatListData}
106
-                    // Animations
107
-                    onScroll={onScroll}
108
-                    contentContainerStyle={{
109
-                        paddingTop: containerPaddingTop,
110
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
111
-                        minHeight: '100%'
112
-                    }}
113
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
114
                 />
102
                 />
115
                 <LogoutDialog
103
                 <LogoutDialog
116
                     {...this.props}
104
                     {...this.props}
441
 
429
 
442
 });
430
 });
443
 
431
 
444
-export default withCollapsible(withTheme(ProfileScreen));
432
+export default withTheme(ProfileScreen);

+ 13
- 15
src/screens/Amicale/VoteScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {FlatList, RefreshControl, View} from "react-native";
4
+import {RefreshControl, View} from "react-native";
5
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
5
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
6
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
6
 import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
7
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
7
 import VoteTease from "../../components/Amicale/Vote/VoteTease";
15
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
15
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
16
 import {Button} from "react-native-paper";
16
 import {Button} from "react-native-paper";
17
 import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
17
 import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
18
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
18
 
19
 
19
 export type team = {
20
 export type team = {
20
     id: number,
21
     id: number,
246
 
247
 
247
         this.generateDateObject();
248
         this.generateDateObject();
248
         return (
249
         return (
249
-            <View>
250
-                {/*$FlowFixMe*/}
251
-                <FlatList
252
-                    data={this.mainFlatListData}
253
-                    refreshControl={
254
-                        <RefreshControl
255
-                            refreshing={false}
256
-                            onRefresh={this.reloadData}
257
-                        />
258
-                    }
259
-                    extraData={this.state.hasVoted.toString()}
260
-                    renderItem={this.mainRenderItem}
261
-                />
262
-            </View>
250
+            <CollapsibleFlatList
251
+                data={this.mainFlatListData}
252
+                refreshControl={
253
+                    <RefreshControl
254
+                        refreshing={false}
255
+                        onRefresh={this.reloadData}
256
+                    />
257
+                }
258
+                extraData={this.state.hasVoted.toString()}
259
+                renderItem={this.mainRenderItem}
260
+            />
263
         );
261
         );
264
     };
262
     };
265
 
263
 

+ 0
- 26
src/screens/Game/screens/GameEndScreen.js View File

1
-// @flow
2
-
3
-import * as React from "react";
4
-import {StackNavigationProp} from "@react-navigation/stack";
5
-import type {CustomTheme} from "../../../managers/ThemeManager";
6
-import {withTheme} from "react-native-paper";
7
-
8
-type Props = {
9
-    navigation: StackNavigationProp,
10
-    theme: CustomTheme,
11
-}
12
-
13
-type State = {
14
-
15
-}
16
-
17
-class GameEndScreen extends React.Component<Props, State> {
18
-
19
-    render() {
20
-        return (
21
-            null
22
-        );
23
-    }
24
-}
25
-
26
-export default withTheme(GameEndScreen);

+ 4
- 3
src/screens/Game/screens/GameStartScreen.js View File

4
 import {StackNavigationProp} from "@react-navigation/stack";
4
 import {StackNavigationProp} from "@react-navigation/stack";
5
 import type {CustomTheme} from "../../../managers/ThemeManager";
5
 import type {CustomTheme} from "../../../managers/ThemeManager";
6
 import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
6
 import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
7
-import {ScrollView, View} from "react-native";
7
+import {View} from "react-native";
8
 import i18n from "i18n-js";
8
 import i18n from "i18n-js";
9
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
9
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
10
 import MascotPopup from "../../../components/Mascot/MascotPopup";
10
 import MascotPopup from "../../../components/Mascot/MascotPopup";
17
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
17
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
18
 import LinearGradient from "react-native-linear-gradient";
18
 import LinearGradient from "react-native-linear-gradient";
19
 import SpeechArrow from "../../../components/Mascot/SpeechArrow";
19
 import SpeechArrow from "../../../components/Mascot/SpeechArrow";
20
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
20
 
21
 
21
 type GameStats = {
22
 type GameStats = {
22
     score: number,
23
     score: number,
417
                     start={{x: 0, y: 0}}
418
                     start={{x: 0, y: 0}}
418
                     end={{x: 0, y: 1}}
419
                     end={{x: 0, y: 1}}
419
                 >
420
                 >
420
-                    <ScrollView>
421
+                    <CollapsibleScrollView>
421
                         {this.getMainContent()}
422
                         {this.getMainContent()}
422
                         <MascotPopup
423
                         <MascotPopup
423
                             visible={this.state.mascotDialogVisible}
424
                             visible={this.state.mascotDialogVisible}
434
                             }}
435
                             }}
435
                             emotion={MASCOT_STYLE.COOL}
436
                             emotion={MASCOT_STYLE.COOL}
436
                         />
437
                         />
437
-                    </ScrollView>
438
+                    </CollapsibleScrollView>
438
                 </LinearGradient>
439
                 </LinearGradient>
439
             </View>
440
             </View>
440
 
441
 

+ 4
- 3
src/screens/Other/FeedbackScreen.js View File

3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
4
 import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
-import {Linking, ScrollView} from "react-native";
6
+import {Linking} from "react-native";
7
 import type {CustomTheme} from "../../managers/ThemeManager";
7
 import type {CustomTheme} from "../../managers/ThemeManager";
8
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
8
 
9
 
9
 type Props = {
10
 type Props = {
10
     theme: CustomTheme
11
     theme: CustomTheme
76
 
77
 
77
     render() {
78
     render() {
78
         return (
79
         return (
79
-            <ScrollView style={{padding: 5}}>
80
+            <CollapsibleScrollView style={{padding: 5}}>
80
                 <Card>
81
                 <Card>
81
                     <Card.Title
82
                     <Card.Title
82
                         title={i18n.t('screens.feedback.bugs')}
83
                         title={i18n.t('screens.feedback.bugs')}
107
                     </Card.Content>
108
                     </Card.Content>
108
                     {this.getButtons(false)}
109
                     {this.getButtons(false)}
109
                 </Card>
110
                 </Card>
110
-            </ScrollView>
111
+            </CollapsibleScrollView>
111
         );
112
         );
112
     }
113
     }
113
 }
114
 }

+ 35
- 34
src/screens/Other/Settings/DashboardEditScreen.js View File

13
 import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
13
 import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
14
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
14
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
15
 import i18n from "i18n-js";
15
 import i18n from "i18n-js";
16
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
16
 
17
 
17
 type Props = {
18
 type Props = {
18
     navigation: StackNavigationProp,
19
     navigation: StackNavigationProp,
108
         );
109
         );
109
     }
110
     }
110
 
111
 
111
-
112
-    render() {
112
+    getListHeader() {
113
         return (
113
         return (
114
-            <View style={{flex: 1}}>
115
-                <View style={{
116
-                    padding: 5
117
-                }}>
118
-                    <Button
119
-                        mode={"contained"}
120
-                        onPress={this.undoDashboard}
121
-                        style={{
122
-                            marginLeft: "auto",
123
-                            marginRight: "auto",
124
-                        }}
125
-                    >
126
-                        {i18n.t("screens.settings.dashboardEdit.undo")}
127
-                    </Button>
128
-                    <View style={{
129
-                        height: 50
130
-                    }}>
131
-                        {this.getDashboard(this.state.currentDashboard)}
114
+            <Card style={{margin: 5}}>
115
+                <Card.Content>
116
+                    <View style={{padding: 5}}>
117
+                        <Button
118
+                            mode={"contained"}
119
+                            onPress={this.undoDashboard}
120
+                            style={{
121
+                                marginLeft: "auto",
122
+                                marginRight: "auto",
123
+                                marginBottom: 10,
124
+                            }}
125
+                        >
126
+                            {i18n.t("screens.settings.dashboardEdit.undo")}
127
+                        </Button>
128
+                        <View style={{height: 50}}>
129
+                            {this.getDashboard(this.state.currentDashboard)}
130
+                        </View>
132
                     </View>
131
                     </View>
132
+                    <Paragraph style={{textAlign: "center"}}>
133
+                        {i18n.t("screens.settings.dashboardEdit.message")}
134
+                    </Paragraph>
135
+                </Card.Content>
136
+            </Card>
137
+        );
138
+    }
133
 
139
 
134
-                </View>
135
-                <FlatList
136
-                    data={this.content}
137
-                    renderItem={this.renderItem}
138
-                    ListHeaderComponent={<Card style={{margin: 5}}>
139
-                        <Card.Content>
140
-                            <Paragraph
141
-                                style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
142
-                        </Card.Content>
143
-
144
-                    </Card>}
145
-                    style={{}}
146
-                />
147
-            </View>
140
+
141
+    render() {
142
+        return (
143
+            <CollapsibleFlatList
144
+                data={this.content}
145
+                renderItem={this.renderItem}
146
+                ListHeaderComponent={this.getListHeader()}
147
+                style={{}}
148
+            />
148
         );
149
         );
149
     }
150
     }
150
 
151
 

+ 9
- 8
src/screens/Other/Settings/SettingsScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {ScrollView, View} from "react-native";
4
+import {View} from "react-native";
5
 import type {CustomTheme} from "../../../managers/ThemeManager";
5
 import type {CustomTheme} from "../../../managers/ThemeManager";
6
 import ThemeManager from '../../../managers/ThemeManager';
6
 import ThemeManager from '../../../managers/ThemeManager';
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
10
 import {Appearance} from "react-native-appearance";
10
 import {Appearance} from "react-native-appearance";
11
 import CustomSlider from "../../../components/Overrides/CustomSlider";
11
 import CustomSlider from "../../../components/Overrides/CustomSlider";
12
 import {StackNavigationProp} from "@react-navigation/stack";
12
 import {StackNavigationProp} from "@react-navigation/stack";
13
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
13
 
14
 
14
 type Props = {
15
 type Props = {
15
     navigation: StackNavigationProp,
16
     navigation: StackNavigationProp,
187
 
188
 
188
     render() {
189
     render() {
189
         return (
190
         return (
190
-            <ScrollView>
191
+            <CollapsibleScrollView>
191
                 <Card style={{margin: 5}}>
192
                 <Card style={{margin: 5}}>
192
                     <Card.Title title={i18n.t('screens.settings.generalCard')}/>
193
                     <Card.Title title={i18n.t('screens.settings.generalCard')}/>
193
                     <List.Section>
194
                     <List.Section>
243
                     <List.Section>
244
                     <List.Section>
244
                         {this.state.isDebugUnlocked
245
                         {this.state.isDebugUnlocked
245
                             ? this.getNavigateItem(
246
                             ? this.getNavigateItem(
246
-                                    "debug",
247
-                                    "bug-check",
248
-                                    i18n.t('screens.debug.title'),
249
-                                    ""
250
-                                )
247
+                                "debug",
248
+                                "bug-check",
249
+                                i18n.t('screens.debug.title'),
250
+                                ""
251
+                            )
251
                             : null}
252
                             : null}
252
                         {this.getNavigateItem(
253
                         {this.getNavigateItem(
253
                             "about",
254
                             "about",
264
                         )}
265
                         )}
265
                     </List.Section>
266
                     </List.Section>
266
                 </Card>
267
                 </Card>
267
-            </ScrollView>
268
+            </CollapsibleScrollView>
268
         );
269
         );
269
     }
270
     }
270
 }
271
 }

+ 4
- 3
src/screens/Services/Proximo/ProximoAboutScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Image, ScrollView, View} from 'react-native';
4
+import {Image, View} from 'react-native';
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import {Card, List, Paragraph, Text} from 'react-native-paper';
6
 import {Card, List, Paragraph, Text} from 'react-native-paper';
7
 import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
7
 import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
8
 import {StackNavigationProp} from "@react-navigation/stack";
8
 import {StackNavigationProp} from "@react-navigation/stack";
9
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
9
 
10
 
10
 type Props = {
11
 type Props = {
11
     navigation: StackNavigationProp,
12
     navigation: StackNavigationProp,
20
 
21
 
21
     render() {
22
     render() {
22
         return (
23
         return (
23
-            <ScrollView style={{padding: 5}}>
24
+            <CollapsibleScrollView style={{padding: 5}}>
24
                 <View style={{
25
                 <View style={{
25
                     width: '100%',
26
                     width: '100%',
26
                     height: 100,
27
                     height: 100,
52
                         <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
53
                         <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
53
                     </Card.Content>
54
                     </Card.Content>
54
                 </Card>
55
                 </Card>
55
-            </ScrollView>
56
+            </CollapsibleScrollView>
56
         );
57
         );
57
     }
58
     }
58
 }
59
 }

+ 4
- 13
src/screens/Services/Proximo/ProximoListScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
4
+import {Image, Platform, ScrollView, View} from "react-native";
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import CustomModal from "../../../components/Overrides/CustomModal";
6
 import CustomModal from "../../../components/Overrides/CustomModal";
7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
7
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
8
 import {stringMatchQuery} from "../../../utils/Search";
8
 import {stringMatchQuery} from "../../../utils/Search";
9
 import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
9
 import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
10
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
10
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
11
-import {withCollapsible} from "../../../utils/withCollapsible";
12
 import {StackNavigationProp} from "@react-navigation/stack";
11
 import {StackNavigationProp} from "@react-navigation/stack";
13
 import type {CustomTheme} from "../../../managers/ThemeManager";
12
 import type {CustomTheme} from "../../../managers/ThemeManager";
14
-import {Collapsible} from "react-navigation-collapsible";
13
+import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
15
 
14
 
16
 function sortPrice(a, b) {
15
 function sortPrice(a, b) {
17
     return a.price - b.price;
16
     return a.price - b.price;
43
     navigation: StackNavigationProp,
42
     navigation: StackNavigationProp,
44
     route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
43
     route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
45
     theme: CustomTheme,
44
     theme: CustomTheme,
46
-    collapsibleStack: Collapsible,
47
 }
45
 }
48
 
46
 
49
 type State = {
47
 type State = {
300
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
298
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
301
 
299
 
302
     render() {
300
     render() {
303
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
304
         return (
301
         return (
305
             <View style={{
302
             <View style={{
306
                 height: '100%'
303
                 height: '100%'
308
                 <CustomModal onRef={this.onModalRef}>
305
                 <CustomModal onRef={this.onModalRef}>
309
                     {this.state.modalCurrentDisplayItem}
306
                     {this.state.modalCurrentDisplayItem}
310
                 </CustomModal>
307
                 </CustomModal>
311
-                <Animated.FlatList
308
+                <CollapsibleFlatList
312
                     data={this.listData}
309
                     data={this.listData}
313
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
310
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
314
                     keyExtractor={this.keyExtractor}
311
                     keyExtractor={this.keyExtractor}
317
                     removeClippedSubviews={true}
314
                     removeClippedSubviews={true}
318
                     getItemLayout={this.itemLayout}
315
                     getItemLayout={this.itemLayout}
319
                     initialNumToRender={10}
316
                     initialNumToRender={10}
320
-                    // Animations
321
-                    onScroll={onScroll}
322
-                    contentContainerStyle={{
323
-                        paddingTop: containerPaddingTop,
324
-                    }}
325
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
326
                 />
317
                 />
327
             </View>
318
             </View>
328
         );
319
         );
329
     }
320
     }
330
 }
321
 }
331
 
322
 
332
-export default withCollapsible(withTheme(ProximoListScreen));
323
+export default withTheme(ProximoListScreen);

+ 5
- 27
src/screens/Services/ServicesScreen.js View File

3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import type {cardList} from "../../components/Lists/CardList/CardList";
4
 import type {cardList} from "../../components/Lists/CardList/CardList";
5
 import CardList from "../../components/Lists/CardList/CardList";
5
 import CardList from "../../components/Lists/CardList/CardList";
6
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
7
-import {withCollapsible} from "../../utils/withCollapsible";
8
-import {Collapsible} from "react-navigation-collapsible";
9
-import {Animated, Image, View} from "react-native";
6
+import {Image, View} from "react-native";
10
 import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
7
 import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
11
 import type {CustomTheme} from "../../managers/ThemeManager";
8
 import type {CustomTheme} from "../../managers/ThemeManager";
12
 import i18n from 'i18n-js';
9
 import i18n from 'i18n-js';
13
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
10
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
14
-import ConnectionManager from "../../managers/ConnectionManager";
15
 import {StackNavigationProp} from "@react-navigation/stack";
11
 import {StackNavigationProp} from "@react-navigation/stack";
16
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
12
 import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
17
 import MascotPopup from "../../components/Mascot/MascotPopup";
13
 import MascotPopup from "../../components/Mascot/MascotPopup";
18
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
14
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
19
 import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
15
 import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
16
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
20
 
17
 
21
 type Props = {
18
 type Props = {
22
     navigation: StackNavigationProp,
19
     navigation: StackNavigationProp,
23
-    collapsibleStack: Collapsible,
24
     theme: CustomTheme,
20
     theme: CustomTheme,
25
 }
21
 }
26
 
22
 
107
     }
103
     }
108
 
104
 
109
     /**
105
     /**
110
-     * Redirects to the given route or to the login screen if user is not logged in.
111
-     *
112
-     * @param route The route to navigate to
113
-     */
114
-    onAmicaleServicePress(route: string) {
115
-        if (ConnectionManager.getInstance().isLoggedIn())
116
-            this.props.navigation.navigate(route);
117
-        else
118
-            this.props.navigation.navigate("login", {nextScreen: route});
119
-    }
120
-
121
-    /**
122
      * A list item showing a list of available services for the current category
106
      * A list item showing a list of available services for the current category
123
      *
107
      *
124
      * @param item
108
      * @param item
155
     }
139
     }
156
 
140
 
157
     render() {
141
     render() {
158
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
159
         return (
142
         return (
160
             <View>
143
             <View>
161
-                <Animated.FlatList
144
+                <CollapsibleFlatList
162
                     data={this.finalDataset}
145
                     data={this.finalDataset}
163
                     renderItem={this.renderItem}
146
                     renderItem={this.renderItem}
164
                     keyExtractor={this.keyExtractor}
147
                     keyExtractor={this.keyExtractor}
165
-                    onScroll={onScroll}
166
-                    contentContainerStyle={{
167
-                        paddingTop: containerPaddingTop,
168
-                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
169
-                    }}
170
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
171
                     ItemSeparatorComponent={() => <Divider/>}
148
                     ItemSeparatorComponent={() => <Divider/>}
149
+                    hasTab={true}
172
                 />
150
                 />
173
                 <MascotPopup
151
                 <MascotPopup
174
                     visible={this.state.mascotDialogVisible}
152
                     visible={this.state.mascotDialogVisible}
190
     }
168
     }
191
 }
169
 }
192
 
170
 
193
-export default withCollapsible(withTheme(ServicesScreen));
171
+export default withTheme(ServicesScreen);

+ 1
- 1
src/utils/CollapsibleUtils.js View File

24
 export function createScreenCollapsibleStack(
24
 export function createScreenCollapsibleStack(
25
     name: string,
25
     name: string,
26
     Stack: StackNavigator,
26
     Stack: StackNavigator,
27
-    component: React.Node,
27
+    component: React.ComponentType<any>,
28
     title: string,
28
     title: string,
29
     useNativeDriver?: boolean,
29
     useNativeDriver?: boolean,
30
     options?: StackNavigationOptions,
30
     options?: StackNavigationOptions,

+ 3
- 21
src/utils/withCollapsible.js View File

12
  * This component will then receive the collapsibleStack prop.
12
  * This component will then receive the collapsibleStack prop.
13
  *
13
  *
14
  * @param Component The component to use Collapsible with
14
  * @param Component The component to use Collapsible with
15
- * @returns {React.ComponentType<React.ClassAttributes<unknown>>}
15
+ * @returns {React.ComponentType<any>}
16
  */
16
  */
17
-export const withCollapsible = (Component: any) => {
17
+export const withCollapsible = (Component: React.ComponentType<any>) => {
18
     return React.forwardRef((props: any, ref: any) => {
18
     return React.forwardRef((props: any, ref: any) => {
19
-
20
-        const {
21
-            onScroll,
22
-            onScrollWithListener,
23
-            containerPaddingTop,
24
-            scrollIndicatorInsetTop,
25
-            translateY,
26
-            progress,
27
-            opacity,
28
-        } = useCollapsibleStack();
29
         return <Component
19
         return <Component
30
-            collapsibleStack={{
31
-                onScroll,
32
-                onScrollWithListener,
33
-                containerPaddingTop: containerPaddingTop,
34
-                scrollIndicatorInsetTop: scrollIndicatorInsetTop,
35
-                translateY,
36
-                progress,
37
-                opacity,
38
-            }}
20
+            collapsibleStack={useCollapsibleStack()}
39
             ref={ref}
21
             ref={ref}
40
             {...props}
22
             {...props}
41
         />;
23
         />;

Loading…
Cancel
Save