package.json

@@ -51,7 +51,6 @@
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "~2.2.0",
     "react-native-webview": "8.1.1",
-    "react-navigation-collapsible": "^5.4.0",
     "react-navigation-header-buttons": "^3.0.5"
   },
   "devDependencies": {

src/components/Custom/BasicLoadingScreen.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
 import {ActivityIndicator, withTheme} from 'react-native-paper';
+import {View} from "react-native";
 
 /**
  * Component used to display a header button
@@ -12,19 +12,17 @@ import {ActivityIndicator, withTheme} from 'react-native-paper';
  */
 function BasicLoadingScreen(props) {
     const {colors} = props.theme;
-    let position = undefined;
-    if (props.isAbsolute !== undefined && props.isAbsolute)
-        position = 'absolute';
-
     return (
         <View style={{
             backgroundColor: colors.background,
-            position: position,
+            position: 'absolute',
             top: 0,
             right: 0,
             width: '100%',
             height: '100%',
-            justifyContent: 'center',
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center'
         }}>
             <ActivityIndicator
                 animating={true}

src/components/Lists/WebSectionList.js

@@ -7,7 +7,6 @@ import {Snackbar} from 'react-native-paper';
 import {Animated, RefreshControl, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
-import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
     navigation: Object,
@@ -21,7 +20,6 @@ type Props = {
     updateData: number,
     itemHeight: number | null,
     onScroll: Function,
-    collapsibleStack: Object,
 }
 
 type State = {
@@ -33,14 +31,13 @@ type State = {
 
 
 const MIN_REFRESH_TIME = 5 * 1000;
-
 /**
  * Component used to render a SectionList with data fetched from the web
  *
  * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
  * To force the component to update, change the value of updateData.
  */
-class WebSectionList extends React.PureComponent<Props, State> {
+export default class WebSectionList extends React.PureComponent<Props, State> {
 
     static defaultProps = {
         renderSectionHeader: null,
@@ -174,16 +171,11 @@ class WebSectionList extends React.PureComponent<Props, State> {
         index
     });
 
-    onListScroll= (event) => {
-
-    };
-
     render() {
         let dataset = [];
         if (this.state.fetchedData !== undefined)
             dataset = this.props.createDataset(this.state.fetchedData);
         const shouldRenderHeader = this.props.renderSectionHeader !== null;
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
         return (
             <View>
                 {/*$FlowFixMe*/}
@@ -192,7 +184,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     extraData={this.props.updateData}
                     refreshControl={
                         <RefreshControl
-                            progressViewOffset={containerPaddingTop}
                             refreshing={this.state.refreshing}
                             onRefresh={this.onRefresh}
                         />
@@ -202,6 +193,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     //$FlowFixMe
                     renderItem={this.props.renderItem}
                     stickySectionHeadersEnabled={this.props.stickyHeader}
+                    contentContainerStyle={{minHeight: '100%'}}
                     style={{minHeight: '100%'}}
                     ListEmptyComponent={this.state.refreshing
                         ? <BasicLoadingScreen/>
@@ -212,12 +204,7 @@ class WebSectionList extends React.PureComponent<Props, State> {
                     }
                     getItemLayout={this.props.itemHeight !== null ? this.itemLayout : undefined}
                     // Animations
-                    onScroll={onScrollWithListener(this.props.onScroll)}
+                    onScroll={this.props.onScroll}
-                    contentContainerStyle={{
-                        paddingTop: containerPaddingTop,
-                        minHeight: '100%'
-                    }}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
                 <Snackbar
                     visible={this.state.snackbarVisible}
@@ -235,5 +222,3 @@ class WebSectionList extends React.PureComponent<Props, State> {
         );
     }
 }
-
-export default withCollapsible(WebSectionList);

src/components/Screens/WebViewScreen.js

@@ -9,18 +9,14 @@ import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
 import {HiddenItem} from "react-navigation-header-buttons";
 import {Linking} from "expo";
 import i18n from 'i18n-js';
-import {Animated, BackHandler} from "react-native";
+import {BackHandler} from "react-native";
-import {withCollapsible} from "../../utils/withCollapsible";
 
 type Props = {
     navigation: Object,
     url: string,
     customJS: string,
-    collapsibleStack: Object,
 }
 
-const AnimatedWebView = Animated.createAnimatedComponent(WebView);
-
 /**
  * Class defining a webview screen.
  */
@@ -116,48 +112,15 @@ class WebViewScreen extends React.PureComponent<Props> {
      *
      * @return {*}
      */
-    getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
+    getRenderLoading = () => <BasicLoadingScreen/>;
-
-// document.getElementsByTagName('body')[0].style.paddingTop = '100px';
-
-// $( 'body *' ).filter(function(){
-//   var position = $(this).css('position');
-//   var top = $(this).css('top');
-//   if((position === 'fixed') && top !== 'auto'){
-//     console.log(top);
-//     $(this).css('top', 'calc(' + top + ' + 100px)');
-//     console.log($(this).css('top'));
-//   };
-// });
-
-// document.querySelectorAll('body *').forEach(function(node){
-//   var style = window.getComputedStyle(node);
-//   var position = style.getPropertyValue('position');
-//   var top = style.getPropertyValue('top');
-//   if((position === 'fixed') && top !== 'auto'){
-//     console.log(top);
-//     node.style.top = 'calc(' + top + ' + 100px)';
-//     console.log(node.style.top);
-//   	console.log(node);
-//   };
-// });
-
-    getJavascriptPadding(padding: number) {
-        return (
-            "document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';\n" +
-            "true;"
-        );
-    }
 
     render() {
-        const {containerPaddingTop, onScroll} = this.props.collapsibleStack;
-        const customJS = this.getJavascriptPadding(containerPaddingTop);
         return (
-            <AnimatedWebView
+            <WebView
                 ref={this.webviewRef}
                 source={{uri: this.props.url}}
                 startInLoadingState={true}
-                injectedJavaScript={this.props.customJS + customJS}
+                injectedJavaScript={this.props.customJS}
                 javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
                 renderError={() => <ErrorView
@@ -167,11 +130,9 @@ class WebViewScreen extends React.PureComponent<Props> {
                 onNavigationStateChange={navState => {
                     this.canGoBack = navState.canGoBack;
                 }}
-                // Animations
-                onScroll={onScroll}
             />
         );
     }
 }
 
-export default withCollapsible(WebViewScreen);
+export default WebViewScreen;

src/navigation/DrawerNavigator.js

@@ -26,8 +26,6 @@ import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
 import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
 import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
 import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
-import {createCollapsibleStack} from "react-navigation-collapsible";
-import {useTheme} from "react-native-paper";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -108,14 +106,12 @@ function SettingsStackComponent() {
 const SelfMenuStack = createStackNavigator();
 
 function SelfMenuStackComponent() {
-    const {colors} = useTheme();
     return (
         <SelfMenuStack.Navigator
             initialRouteName="self-menu"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <SelfMenuStack.Screen
                 name="self-menu"
                 component={SelfMenuScreen}
@@ -123,18 +119,10 @@ function SelfMenuStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('screens.menuSelf'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
         </SelfMenuStack.Navigator>
     );
 }
@@ -142,14 +130,12 @@ function SelfMenuStackComponent() {
 const AvailableRoomStack = createStackNavigator();
 
 function AvailableRoomStackComponent() {
-    const {colors} = useTheme();
     return (
         <AvailableRoomStack.Navigator
             initialRouteName="available-rooms"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <AvailableRoomStack.Screen
                 name="available-rooms"
                 component={AvailableRoomScreen}
@@ -157,18 +143,10 @@ function AvailableRoomStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('screens.availableRooms'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </AvailableRoomStack.Navigator>
     );
 }
@@ -176,14 +154,12 @@ function AvailableRoomStackComponent() {
 const BibStack = createStackNavigator();
 
 function BibStackComponent() {
-    const {colors} = useTheme();
     return (
         <BibStack.Navigator
             initialRouteName="bib"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <BibStack.Screen
                 name="bib"
                 component={BibScreen}
@@ -191,18 +167,10 @@ function BibStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('screens.bib'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </BibStack.Navigator>
     );
 }
@@ -210,14 +178,12 @@ function BibStackComponent() {
 const AmicaleWebsiteStack = createStackNavigator();
 
 function AmicaleWebsiteStackComponent() {
-    const {colors} = useTheme();
     return (
         <AmicaleWebsiteStack.Navigator
             initialRouteName="amicale-website"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <AmicaleWebsiteStack.Screen
                 name="amicale-website"
                 component={AmicaleWebsiteScreen}
@@ -225,18 +191,10 @@ function AmicaleWebsiteStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: "Amicale",
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </AmicaleWebsiteStack.Navigator>
     );
 }
@@ -244,14 +202,12 @@ function AmicaleWebsiteStackComponent() {
 const ElusEtudiantsStack = createStackNavigator();
 
 function ElusEtudiantsStackComponent() {
-    const {colors} = useTheme();
     return (
         <ElusEtudiantsStack.Navigator
             initialRouteName="elus-etudiants"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <ElusEtudiantsStack.Screen
                 name="elus-etudiants"
                 component={ElusEtudiantsWebsiteScreen}
@@ -259,18 +215,10 @@ function ElusEtudiantsStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: "Élus Étudiants",
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </ElusEtudiantsStack.Navigator>
     );
 }
@@ -278,14 +226,12 @@ function ElusEtudiantsStackComponent() {
 const WiketudStack = createStackNavigator();
 
 function WiketudStackComponent() {
-    const {colors} = useTheme();
     return (
         <WiketudStack.Navigator
             initialRouteName="wiketud"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <WiketudStack.Screen
                 name="wiketud"
                 component={WiketudWebsiteScreen}
@@ -293,18 +239,10 @@ function WiketudStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: "Wiketud",
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </WiketudStack.Navigator>
     );
 }
@@ -312,14 +250,12 @@ function WiketudStackComponent() {
 const TutorInsaStack = createStackNavigator();
 
 function TutorInsaStackComponent() {
-    const {colors} = useTheme();
     return (
         <TutorInsaStack.Navigator
             initialRouteName="tutorinsa"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <TutorInsaStack.Screen
                 name="tutorinsa"
                 component={TutorInsaWebsiteScreen}
@@ -327,23 +263,16 @@ function TutorInsaStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: "Tutor'INSA",
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </TutorInsaStack.Navigator>
     );
 }
 
 
+
 const TetrisStack = createStackNavigator();
 
 function TetrisStackComponent() {
@@ -479,14 +408,12 @@ function AmicaleContactStackComponent() {
 const ClubStack = createStackNavigator();
 
 function ClubStackComponent() {
-    const {colors} = useTheme();
     return (
         <ClubStack.Navigator
             initialRouteName={"club-list"}
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <ClubStack.Screen
                 name="club-list"
                 component={ClubListScreen}
@@ -494,18 +421,10 @@ function ClubStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('clubs.clubList'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
             <ClubStack.Screen
                 name="club-information"
                 component={ClubDisplayScreen}

src/navigation/MainTabNavigator.js

@@ -13,13 +13,12 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import {useTheme, withTheme} from 'react-native-paper';
+import {withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 import FeedItemScreen from "../screens/FeedItemScreen";
-import {createCollapsibleStack} from "react-navigation-collapsible";
 
 
 const TAB_ICONS = {
@@ -47,49 +46,30 @@ function getDrawerButton(navigation: Object) {
 const ProximoStack = createStackNavigator();
 
 function ProximoStackComponent() {
-    const {colors} = useTheme();
     return (
         <ProximoStack.Navigator
             initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <ProximoStack.Screen
                 name="index"
                 options={({navigation}) => {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: 'Proximo',
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
                 component={ProximoMainScreen}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
-            {createCollapsibleStack(
             <ProximoStack.Screen
                 name="proximo-list"
                 options={{
-                        title: i18n.t('screens.proximoArticles'),
+                    title: i18n.t('screens.proximoArticles')
-                        headerStyle: {
-                            backgroundColor: colors.surface,
-                        }
                 }}
                 component={ProximoListScreen}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
             <ProximoStack.Screen
                 name="proximo-about"
                 component={ProximoAboutScreen}
@@ -105,14 +85,12 @@ function ProximoStackComponent() {
 const ProxiwashStack = createStackNavigator();
 
 function ProxiwashStackComponent() {
-    const {colors} = useTheme();
     return (
         <ProxiwashStack.Navigator
             initialRouteName="index"
             headerMode='float'
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <ProxiwashStack.Screen
                 name="index"
                 component={ProxiwashScreen}
@@ -120,18 +98,10 @@ function ProxiwashStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('screens.proxiwash'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
             <ProxiwashStack.Screen
                 name="proxiwash-about"
                 component={ProxiwashAboutScreen}
@@ -147,7 +117,6 @@ function ProxiwashStackComponent() {
 const PlanningStack = createStackNavigator();
 
 function PlanningStackComponent() {
-    const {colors} = useTheme();
     return (
         <PlanningStack.Navigator
             initialRouteName="index"
@@ -183,14 +152,13 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
     let data;
     if (initialRoute !== null)
         data = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
-    const {colors} = useTheme();
+
     return (
         <HomeStack.Navigator
             initialRouteName={"index"}
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <HomeStack.Screen
                 name="index"
                 component={HomeScreen}
@@ -198,19 +166,11 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: i18n.t('screens.home'),
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
                 initialParams={data}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: true,
-                }
-            )}
             <HomeStack.Screen
                 name="home-planning-information"
                 component={PlanningDisplayScreen}
@@ -256,14 +216,12 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
 const PlanexStack = createStackNavigator();
 
 function PlanexStackComponent() {
-    const {colors} = useTheme();
     return (
         <PlanexStack.Navigator
             initialRouteName="index"
             headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-            {createCollapsibleStack(
             <PlanexStack.Screen
                 name="index"
                 component={PlanexScreen}
@@ -271,18 +229,10 @@ function PlanexStackComponent() {
                     const openDrawer = getDrawerButton.bind(this, navigation);
                     return {
                         title: 'Planex',
-                            headerLeft: openDrawer,
+                        headerLeft: openDrawer
-                            headerStyle: {
-                                backgroundColor: colors.surface,
-                            },
                     };
                 }}
-                />,
+            />
-                {
-                    collapsedColor: 'transparent',
-                    useNativeDriver: false, // native driver does not work with webview
-                }
-            )}
         </PlanexStack.Navigator>
     );
 }

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Platform} from "react-native";
+import {FlatList, Platform} from "react-native";
 import {Chip, Searchbar, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import i18n from "i18n-js";
@@ -9,12 +9,10 @@ import ClubListItem from "../../../components/Lists/ClubListItem";
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
 import ClubListHeader from "../../../components/Lists/ClubListHeader";
 import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton";
-import {withCollapsible} from "../../../utils/withCollapsible";
 
 type Props = {
     navigation: Object,
     theme: Object,
-    collapsibleStack: Object,
 }
 
 type State = {
@@ -96,10 +94,9 @@ class ClubListScreen extends React.Component<Props, State> {
 
     getScreen = (data: Object) => {
         this.categories = data[0].categories;
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             //$FlowFixMe
-            <Animated.FlatList
+            <FlatList
                 data={data[0].clubs}
                 keyExtractor={this.keyExtractor}
                 renderItem={this.getRenderItem}
@@ -107,10 +104,6 @@ class ClubListScreen extends React.Component<Props, State> {
                 // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
                 removeClippedSubviews={true}
                 getItemLayout={this.itemLayout}
-                // Animations
-                onScroll={onScroll}
-                contentContainerStyle={{paddingTop: containerPaddingTop}}
-                scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
             />
         )
     };
@@ -215,4 +208,4 @@ class ClubListScreen extends React.Component<Props, State> {
     }
 }
 
-export default withCollapsible(withTheme(ClubListScreen));
+export default withTheme(ClubListScreen);

src/screens/HomeScreen.js

@@ -222,7 +222,7 @@ class HomeScreen extends React.Component<Props, State> {
                         id: key,
                         data: 0,
                         icon: 'silverware-fork-knife',
-                        color: this.colors.menuColor,
+                        color: this.colors.menu,
                         onPress: this.onMenuClick,
                         isAvailable: value.length > 0
                     };

src/screens/Proximo/ProximoListScreen.js

@@ -1,14 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image, Platform, ScrollView, View} from "react-native";
+import {FlatList, Image, Platform, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../components/Custom/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../../utils/Search";
 import ProximoListItem from "../../components/Lists/ProximoListItem";
 import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
-import {withCollapsible} from "../../utils/withCollapsible";
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -40,7 +39,6 @@ type Props = {
     navigation: Object,
     route: Object,
     theme: Object,
-    collapsibleStack: Object,
 }
 
 type State = {
@@ -297,7 +295,6 @@ class ProximoListScreen extends React.Component<Props, State> {
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
 
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <View style={{
                 height: '100%'
@@ -306,7 +303,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                     {this.state.modalCurrentDisplayItem}
                 </CustomModal>
                 {/*$FlowFixMe*/}
-                <Animated.FlatList
+                <FlatList
                     data={this.listData}
                     extraData={this.state.currentSearchString + this.state.currentSortMode}
                     keyExtractor={this.keyExtractor}
@@ -315,14 +312,10 @@ class ProximoListScreen extends React.Component<Props, State> {
                     removeClippedSubviews={true}
                     getItemLayout={this.itemLayout}
                     initialNumToRender={10}
-                    // Animations
-                    onScroll={onScroll}
-                    contentContainerStyle={{paddingTop: containerPaddingTop}}
-                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                 />
             </View>
         );
     }
 }
 
-export default withCollapsible(withTheme(ProximoListScreen));
+export default withTheme(ProximoListScreen);

src/utils/withCollapsible.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import {useCollapsibleStack} from "react-navigation-collapsible";
-
-export const withCollapsible = (Component: any) => {
-    return (props: any) => {
-        return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
-    };
-};