Browse Source

Fixed planning modal impossible to close/scroll

keplyx 4 years ago
parent
commit
15fe4c4147
1 changed files with 21 additions and 5 deletions
  1. 21
    5
      screens/PlanningScreen.js

+ 21
- 5
screens/PlanningScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Content, H1, H2, H3, Text} from 'native-base';
4
+import {Content, H1, H2, H3, Text, Button} from 'native-base';
5
 import i18n from "i18n-js";
5
 import i18n from "i18n-js";
6
 import {View, Image} from "react-native";
6
 import {View, Image} from "react-native";
7
 import ThemeManager from "../utils/ThemeManager";
7
 import ThemeManager from "../utils/ThemeManager";
12
 import Touchable from 'react-native-platform-touchable';
12
 import Touchable from 'react-native-platform-touchable';
13
 import Modalize from 'react-native-modalize';
13
 import Modalize from 'react-native-modalize';
14
 import WebDataManager from "../utils/WebDataManager";
14
 import WebDataManager from "../utils/WebDataManager";
15
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
15
 
16
 
16
 
17
 
17
 type Props = {
18
 type Props = {
84
         return daysOfYear;
85
         return daysOfYear;
85
     }
86
     }
86
 
87
 
88
+    getModalHeader() {
89
+        return (
90
+            <View style={{marginBottom: 0}}>
91
+                <Button
92
+                    onPress={() => this.modalRef.current.close()}
93
+                    style={{
94
+                        marginTop: 50,
95
+                        marginLeft: 'auto',
96
+                    }}
97
+                    transparent>
98
+                    <CustomMaterialIcon icon={'close'}/>
99
+                </Button>
100
+            </View>
101
+        );
102
+    }
103
+
87
     getModalContent() {
104
     getModalContent() {
88
         return (
105
         return (
89
             <View style={{
106
             <View style={{
90
                 flex: 1,
107
                 flex: 1,
91
                 padding: 20
108
                 padding: 20
92
             }}>
109
             }}>
93
-                <H1 style={{
94
-                    marginTop: 20,
95
-                }}>
110
+                <H1>
96
                     {this.state.modalCurrentDisplayItem.title}
111
                     {this.state.modalCurrentDisplayItem.title}
97
                 </H1>
112
                 </H1>
98
                 <H3 style={{
113
                 <H3 style={{
306
                           modalStyle={{
321
                           modalStyle={{
307
                               backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
322
                               backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
308
                           }}
323
                           }}
309
-                          adjustToContentHeight
324
+                    // adjustToContentHeight // Breaks when displaying full screen, half, then full again
325
+                          HeaderComponent={() => this.getModalHeader()}
310
                           onClosed={() => this.onModalClosed()}>
326
                           onClosed={() => this.onModalClosed()}>
311
                     {this.getModalContent()}
327
                     {this.getModalContent()}
312
                 </Modalize>
328
                 </Modalize>

Loading…
Cancel
Save