Moved modalized component inside custom component

components/CustomModal.js

@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+import {withTheme} from 'react-native-paper';
+import {Modalize} from "react-native-modalize";
+
+function CustomModal(props) {
+    const { colors } = props.theme;
+    return (
+        <Modalize
+            ref={props.onRef}
+            adjustToContentHeight
+            handlePosition={'inside'}
+            modalStyle={{backgroundColor: colors.card}}
+            handleStyle={{backgroundColor: colors.primary}}
+        >
+            {props.children}
+        </Modalize>
+    );
+}
+
+export default withTheme(CustomModal);
+

screens/About/AboutScreen.js

@@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, View} from 'react-native';
 import i18n from "i18n-js";
 import appJson from '../../app';
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
-import {Modalize} from "react-native-modalize";
+import CustomModal from "../../components/CustomModal";
 import ThemeManager from "../../utils/ThemeManager";
 import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper';
 
@@ -62,7 +62,7 @@ function openWebLink(link) {
 export default class AboutScreen extends React.Component<Props, State> {
 
     debugTapCounter = 0;
-    modalRef: { current: null | Modalize };
+    modalRef: Object;
 
     state = {
         isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
@@ -186,12 +186,13 @@ export default class AboutScreen extends React.Component<Props, State> {
 
     getCardItem: Function;
     getMainCard: Function;
+    onModalRef: Function;
 
     constructor(props: any) {
         super(props);
-        this.modalRef = React.createRef();
         this.getCardItem = this.getCardItem.bind(this);
         this.getMainCard = this.getMainCard.bind(this);
+        this.onModalRef = this.onModalRef.bind(this);
     }
 
     getAppCard() {
@@ -309,12 +310,6 @@ export default class AboutScreen extends React.Component<Props, State> {
         const onPressMail = openWebLink.bind(this, links.bugsMail);
         const onPressGit = openWebLink.bind(this, links.bugsGit);
         return (
-            <Modalize ref={this.modalRef}
-                      adjustToContentHeight
-                      handlePosition={'inside'}
-                      modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
-                      handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
-            >
             <View style={{
                 flex: 1,
                 padding: 20
@@ -350,13 +345,12 @@ export default class AboutScreen extends React.Component<Props, State> {
                     <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
                 </Button>
             </View>
-            </Modalize>
         );
     }
 
     openBugReportModal() {
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.open();
+            this.modalRef.open();
         }
     }
 
@@ -372,10 +366,16 @@ export default class AboutScreen extends React.Component<Props, State> {
         return <View/>;
     }
 
+    onModalRef(ref: Object) {
+        this.modalRef = ref;
+    }
+
     render() {
         return (
             <View style={{padding: 5}}>
+                <CustomModal onRef={this.onModalRef}>
                     {this.getBugReportModal()}
+                </CustomModal>
                 <FlatList
                     style={{padding: 5}}
                     data={this.dataOrder}

screens/DebugScreen.js

@@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager';
 import {Alert, Clipboard, ScrollView, View} from "react-native";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import NotificationsManager from "../utils/NotificationsManager";
-import {Modalize} from "react-native-modalize";
+import CustomModal from "../components/CustomModal";
 import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
 
 type Props = {
@@ -22,16 +22,18 @@ type State = {
  */
 export default class DebugScreen extends React.Component<Props, State> {
 
-    modalRef: { current: null | Modalize };
+    modalRef: Object;
     modalInputValue = '';
     state = {
         modalCurrentDisplayItem: {},
         currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
     };
 
+    onModalRef: Function;
+
     constructor(props: any) {
         super(props);
-        this.modalRef = React.createRef();
+        this.onModalRef = this.onModalRef.bind(this);
     }
 
     static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
@@ -76,8 +78,8 @@ export default class DebugScreen extends React.Component<Props, State> {
         this.setState({
             modalCurrentDisplayItem: item
         });
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.open();
+            this.modalRef.open();
         }
     }
 
@@ -127,15 +129,16 @@ export default class DebugScreen extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(key, value);
     }
 
+    onModalRef(ref: Object) {
+        this.modalRef = ref;
+    }
+
     render() {
         return (
             <View>
-                <Modalize
+                <CustomModal onRef={this.onModalRef}>
-                    ref={this.modalRef}
-                    adjustToContentHeight
-                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
                     {this.getModalContent()}
-                </Modalize>
+                </CustomModal>
                 <ScrollView style={{padding: 5}}>
                     <Card style={{margin: 5}}>
                         <Card.Title

screens/Proximo/ProximoListScreen.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {FlatList, Image, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import ThemeManager from "../../utils/ThemeManager";
-import {Modalize} from 'react-native-modalize';
+import CustomModal from "../../components/CustomModal";
 import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
 
 function sortPrice(a, b) {
@@ -47,17 +47,17 @@ type State = {
  */
 export default class ProximoListScreen extends React.Component<Props, State> {
 
-    modalRef: { current: null | Modalize };
+    modalRef: Object;
     originalData: Array<Object>;
     shouldFocusSearchBar: boolean;
 
     onSearchStringChange: Function;
     onSortMenuPress: Function;
     renderItem: Function;
+    onModalRef: Function;
 
     constructor(props: any) {
         super(props);
-        this.modalRef = React.createRef();
         this.originalData = this.props.route.params['data']['data'];
         this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
         this.state = {
@@ -69,6 +69,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.onSearchStringChange = this.onSearchStringChange.bind(this);
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
         this.renderItem = this.renderItem.bind(this);
+        this.onModalRef = this.onModalRef.bind(this);
     }
 
     /**
@@ -95,8 +96,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 data.sort(sortNameReverse);
                 break;
         }
-        if (this.modalRef.current && mode !== this.state.currentSortMode) {
+        if (this.modalRef && mode !== this.state.currentSortMode) {
-            this.modalRef.current.close();
+            this.modalRef.close();
         }
     }
 
@@ -250,8 +251,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.setState({
             modalCurrentDisplayItem: this.getModalItemContent(item)
         });
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.open();
+            this.modalRef.open();
         }
     }
 
@@ -259,8 +260,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.setState({
             modalCurrentDisplayItem: this.getModalSortMenu()
         });
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.open();
+            this.modalRef.open();
         }
     }
 
@@ -283,9 +284,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
                 descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
                 onPress={onPress}
-                left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
+                left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
                                              source={{uri: item.image}}/>}
-                right={props =>
+                right={() =>
                     <Text style={{fontWeight: "bold"}}>
                         {item.price}€
                     </Text>}
@@ -297,20 +298,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         return item.name + item.code;
     }
 
+    onModalRef(ref: Object) {
+        this.modalRef = ref;
+    }
+
     render() {
         return (
             <View style={{
                 height: '100%'
             }}>
-                <Modalize
+                <CustomModal onRef={this.onModalRef}>
-                    ref={this.modalRef}
-                    adjustToContentHeight
-                    handlePosition={'inside'}
-                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}
-                    handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
-                >
                     {this.state.modalCurrentDisplayItem}
-                </Modalize>
+                </CustomModal>
                 <FlatList
                     data={this.state.currentlyDisplayedData}
                     extraData={this.state.currentlyDisplayedData}

screens/Proxiwash/ProxiwashScreen.js

@@ -11,7 +11,7 @@ import {Avatar, Banner, Button, Card, Text} from 'react-native-paper';
 import HeaderButton from "../../components/HeaderButton";
 import ProxiwashListItem from "../../components/ProxiwashListItem";
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
-import {Modalize} from "react-native-modalize";
+import CustomModal from "../../components/CustomModal";
 import ThemeManager from "../../utils/ThemeManager";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
@@ -41,13 +41,14 @@ type State = {
  */
 export default class ProxiwashScreen extends React.Component<Props, State> {
 
-    modalRef: { current: null | Modalize };
+    modalRef: Object;
 
     onAboutPress: Function;
     getRenderItem: Function;
     getRenderSectionHeader: Function;
     createDataset: Function;
     onHideBanner: Function;
+    onModalRef: Function;
 
     fetchedData: Object;
 
@@ -66,7 +67,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
      */
     constructor() {
         super();
-        this.modalRef = React.createRef();
         stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
         stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
         stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
@@ -91,6 +91,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
         this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
         this.createDataset = this.createDataset.bind(this);
         this.onHideBanner = this.onHideBanner.bind(this);
+        this.onModalRef = this.onModalRef.bind(this);
     }
 
     onHideBanner() {
@@ -249,14 +250,14 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
         this.setState({
             modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
         });
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.open();
+            this.modalRef.open();
         }
     }
 
     onSetupNotificationsPress(machineId: string) {
-        if (this.modalRef.current) {
+        if (this.modalRef) {
-            this.modalRef.current.close();
+            this.modalRef.close();
         }
         this.setupNotifications(machineId)
     }
@@ -323,7 +324,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
         );
     }
 
-
     onAboutPress() {
         this.props.navigation.navigate('ProxiwashAboutScreen');
     }
@@ -334,6 +334,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
         );
     }
 
+    onModalRef(ref: Object) {
+        this.modalRef = ref;
+    }
+
     render() {
         const nav = this.props.navigation;
         return (
@@ -353,14 +357,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
                 >
                     {i18n.t('proxiwashScreen.enableNotificationsTip')}
                 </Banner>
-                <Modalize ref={this.modalRef}
+                <CustomModal onRef={this.onModalRef}>
-                          adjustToContentHeight
-                          handlePosition={'inside'}
-                          modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
-                          handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
-                >
                     {this.state.modalCurrentDisplayItem}
-                </Modalize>
+                </CustomModal>
                 <WebSectionList
                     createDataset={this.createDataset}
                     navigation={nav}