Browse Source

Enabled collapsing header in login screen

Arnaud Vergnet 3 years ago
parent
commit
0c71a78b22
2 changed files with 18 additions and 19 deletions
  1. 2
    15
      src/navigation/MainTabNavigator.js
  2. 16
    4
      src/screens/Amicale/LoginScreen.js

+ 2
- 15
src/navigation/MainTabNavigator.js View File

@@ -126,13 +126,7 @@ function ServicesStackComponent() {
126 126
 
127 127
 
128 128
             {/*     AMICALE     */}
129
-            <ServicesStack.Screen
130
-                name="login"
131
-                component={LoginScreen}
132
-                options={{
133
-                    title: i18n.t('screens.login'),
134
-                }}
135
-            />
129
+            {createScreenCollapsibleStack("login", ServicesStack, LoginScreen, i18n.t('screens.login'))}
136 130
             {createScreenCollapsibleStack("profile", ServicesStack, ProfileScreen, i18n.t('screens.profile'))}
137 131
             {createScreenCollapsibleStack("club-list", ServicesStack, ClubListScreen, i18n.t('clubs.clubList'))}
138 132
             <ServicesStack.Screen
@@ -274,14 +268,7 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
274 268
                 }}
275 269
             />
276 270
             {createScreenCollapsibleStack("self-menu", HomeStack, SelfMenuScreen, i18n.t('screens.menuSelf'), true, {...modalTransition})}
277
-
278
-            <HomeStack.Screen
279
-                name="login"
280
-                component={LoginScreen}
281
-                options={{
282
-                    title: i18n.t('screens.login'),
283
-                }}
284
-            />
271
+            {createScreenCollapsibleStack("login", HomeStack, LoginScreen, i18n.t('screens.login'))}
285 272
         </HomeStack.Navigator>
286 273
     );
287 274
 }

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

@@ -1,16 +1,20 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {KeyboardAvoidingView, ScrollView, StyleSheet, View} from "react-native";
4
+import {Animated, KeyboardAvoidingView, StyleSheet, View} from "react-native";
5 5
 import {Avatar, Button, Card, HelperText, Paragraph, TextInput, withTheme} from 'react-native-paper';
6 6
 import ConnectionManager from "../../managers/ConnectionManager";
7 7
 import i18n from 'i18n-js';
8 8
 import ErrorDialog from "../../components/Dialogs/ErrorDialog";
9 9
 import {CommonActions} from "@react-navigation/native";
10
+import {withCollapsible} from "../../utils/withCollapsible";
11
+import {Collapsible} from "react-navigation-collapsible";
12
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
10 13
 
11 14
 type Props = {
12 15
     navigation: Object,
13 16
     route: Object,
17
+    collapsibleStack: Collapsible,
14 18
 }
15 19
 
16 20
 type State = {
@@ -248,6 +252,7 @@ class LoginScreen extends React.Component<Props, State> {
248 252
     }
249 253
 
250 254
     render() {
255
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
251 256
         return (
252 257
             <KeyboardAvoidingView
253 258
                 behavior={"height"}
@@ -256,7 +261,14 @@ class LoginScreen extends React.Component<Props, State> {
256 261
                 enabled
257 262
                 keyboardVerticalOffset={100}
258 263
             >
259
-                <ScrollView>
264
+                <Animated.ScrollView
265
+                    onScroll={onScroll}
266
+                    contentContainerStyle={{
267
+                        paddingTop: containerPaddingTop,
268
+                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
269
+                    }}
270
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
271
+                >
260 272
                     <View>
261 273
                         {this.getMainCard()}
262 274
                         {this.getSecondaryCard()}
@@ -266,7 +278,7 @@ class LoginScreen extends React.Component<Props, State> {
266 278
                         onDismiss={this.hideErrorDialog}
267 279
                         errorCode={this.state.dialogError}
268 280
                     />
269
-                </ScrollView>
281
+                </Animated.ScrollView>
270 282
             </KeyboardAvoidingView>
271 283
         );
272 284
     }
@@ -292,4 +304,4 @@ const styles = StyleSheet.create({
292 304
     }
293 305
 });
294 306
 
295
-export default withTheme(LoginScreen);
307
+export default withCollapsible(withTheme(LoginScreen));

Loading…
Cancel
Save