Browse Source

Added collapsible header to profile

Arnaud Vergnet 3 years ago
parent
commit
96ed75ac72
2 changed files with 18 additions and 12 deletions
  1. 1
    7
      src/navigation/MainTabNavigator.js
  2. 17
    5
      src/screens/Amicale/ProfileScreen.js

+ 1
- 7
src/navigation/MainTabNavigator.js View File

@@ -246,13 +246,7 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
246 246
                     title: i18n.t('screens.login'),
247 247
                 }}
248 248
             />
249
-            <HomeStack.Screen
250
-                name="profile"
251
-                component={ProfileScreen}
252
-                options={{
253
-                    title: i18n.t('screens.profile'),
254
-                }}
255
-            />
249
+            {createScreenCollapsibleStack("profile", HomeStack, ProfileScreen, i18n.t('screens.profile'))}
256 250
             {createScreenCollapsibleStack("club-list", HomeStack, ClubListScreen, i18n.t('clubs.clubList'))}
257 251
             <HomeStack.Screen
258 252
                 name="club-about"

+ 17
- 5
src/screens/Amicale/ProfileScreen.js View File

@@ -1,16 +1,20 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList, StyleSheet, View} from "react-native";
4
+import {Animated, FlatList, StyleSheet, View} from "react-native";
5 5
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7 7
 import i18n from 'i18n-js';
8 8
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
9 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";
10 13
 
11 14
 type Props = {
12 15
     navigation: Object,
13 16
     theme: Object,
17
+    collapsibleStack: Collapsible,
14 18
 }
15 19
 
16 20
 type State = {
@@ -52,12 +56,20 @@ class ProfileScreen extends React.Component<Props, State> {
52 56
 
53 57
     getScreen = (data: Object) => {
54 58
         this.data = data[0];
59
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
55 60
         return (
56
-            <View>
57
-                {/*$FlowFixMe*/}
58
-                <FlatList
61
+            <View style={{flex: 1}}>
62
+                <Animated.FlatList
59 63
                     renderItem={this.getRenderItem}
60 64
                     data={this.flatListData}
65
+                    // Animations
66
+                    onScroll={onScroll}
67
+                    contentContainerStyle={{
68
+                        paddingTop: containerPaddingTop,
69
+                        paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
70
+                        minHeight: '100%'
71
+                    }}
72
+                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
61 73
                 />
62 74
                 <LogoutDialog
63 75
                     {...this.props}
@@ -323,4 +335,4 @@ const styles = StyleSheet.create({
323 335
 
324 336
 });
325 337
 
326
-export default withTheme(ProfileScreen);
338
+export default withCollapsible(withTheme(ProfileScreen));

Loading…
Cancel
Save