Enabled collapsing header in login screen

src/navigation/MainTabNavigator.js

@@ -126,13 +126,7 @@ function ServicesStackComponent() {
 
 
             {/*     AMICALE     */}
-            <ServicesStack.Screen
+            {createScreenCollapsibleStack("login", ServicesStack, LoginScreen, i18n.t('screens.login'))}
-                name="login"
-                component={LoginScreen}
-                options={{
-                    title: i18n.t('screens.login'),
-                }}
-            />
             {createScreenCollapsibleStack("profile", ServicesStack, ProfileScreen, i18n.t('screens.profile'))}
             {createScreenCollapsibleStack("club-list", ServicesStack, ClubListScreen, i18n.t('clubs.clubList'))}
             <ServicesStack.Screen
@@ -274,14 +268,7 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
                 }}
             />
             {createScreenCollapsibleStack("self-menu", HomeStack, SelfMenuScreen, i18n.t('screens.menuSelf'), true, {...modalTransition})}
-
+            {createScreenCollapsibleStack("login", HomeStack, LoginScreen, i18n.t('screens.login'))}
-            <HomeStack.Screen
-                name="login"
-                component={LoginScreen}
-                options={{
-                    title: i18n.t('screens.login'),
-                }}
-            />
         </HomeStack.Navigator>
     );
 }

src/screens/Amicale/LoginScreen.js

@@ -1,16 +1,20 @@
 // @flow
 
 import * as React from 'react';
-import {KeyboardAvoidingView, ScrollView, StyleSheet, View} from "react-native";
+import {Animated, KeyboardAvoidingView, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
 import ConnectionManager from "../../managers/ConnectionManager";
 import i18n from 'i18n-js';
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
 import {CommonActions} from "@react-navigation/native";
+import {withCollapsible} from "../../utils/withCollapsible";
+import {Collapsible} from "react-navigation-collapsible";
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
     route: Object,
+    collapsibleStack: Collapsible,
 }
 
 type State = {
@@ -248,6 +252,7 @@ class LoginScreen extends React.Component<Props, State> {
     }
 
     render() {
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
         return (
             <KeyboardAvoidingView
                 behavior={"height"}
@@ -256,7 +261,14 @@ class LoginScreen extends React.Component<Props, State> {
                 enabled
                 keyboardVerticalOffset={100}
             >
-                <ScrollView>
+                <Animated.ScrollView
+                    onScroll={onScroll}
+                    contentContainerStyle={{
+                        paddingTop: containerPaddingTop,
+                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
+                    }}
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+                >
                     <View>
                         {this.getMainCard()}
                         {this.getSecondaryCard()}
@@ -266,7 +278,7 @@ class LoginScreen extends React.Component<Props, State> {
                         onDismiss={this.hideErrorDialog}
                         errorCode={this.state.dialogError}
                     />
-                </ScrollView>
+                </Animated.ScrollView>
             </KeyboardAvoidingView>
         );
     }
@@ -292,4 +304,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export default withTheme(LoginScreen);
+export default withCollapsible(withTheme(LoginScreen));