Fixed side menu staying open when changing tab + fixed ios tab icon color

components/BaseContainer.js

@@ -24,6 +24,8 @@ type State = {
 
 export default class BaseContainer extends React.Component<Props, State> {
 
+    willBlurSubscription: function;
+
     static defaultProps = {
         headerRightButton: <View/>
     };
@@ -43,6 +45,26 @@ export default class BaseContainer extends React.Component<Props, State> {
         this.setState({isOpen});
     }
 
+    /**
+     * Register for blur event to close side menu on screen change
+     */
+    componentDidMount() {
+        this.willBlurSubscription = this.props.navigation.addListener(
+            'willBlur',
+            payload => {
+                this.setState({isOpen: false});
+            }
+        );
+    }
+
+    /**
+     * Unregister from event when un-mounting components
+     */
+    componentWillUnmount() {
+        if (this.willBlurSubscription !== undefined)
+            this.willBlurSubscription.remove();
+    }
+
     render() {
         return (
             <View style={{

components/FetchedDataSectionList.js

@@ -314,8 +314,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
             tabbedView.push(
                 <Tab heading={
                     <TabHeading>
-                        <CustomMaterialIcon icon={dataset[i].icon}
+                        <CustomMaterialIcon
-                                            color={'#fff'}
+                            icon={dataset[i].icon}
+                            color={ThemeManager.getCurrentThemeVariables().tabIconColor}
                             fontSize={20}
                         />
                         <Text>{dataset[i].title}</Text>

native-base-theme/variables/platform.js

@@ -238,6 +238,7 @@ export default {
 
     // Tabs
     tabBgColor: "#F8F8F8",
+    tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
     tabFontSize: 15,
 
     // Text

native-base-theme/variables/platformDark.js

@@ -239,6 +239,7 @@ export default {
 
     // Tabs
     tabBgColor: "#2b2b2b",
+    tabIconColor: "#fff",
     tabFontSize: 15,
 
     // Text

screens/ProxiwashAboutScreen.js

@@ -36,7 +36,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <TabHeading>
                                 <CustomMaterialIcon
                                     icon={'information'}
-                                    color={'#fff'}
+                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
                                     fontSize={20}
                                 />
                                 <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
@@ -106,7 +106,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <TabHeading>
                                 <CustomMaterialIcon
                                     icon={'cash'}
-                                    color={'#fff'}
+                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
                                     fontSize={20}
                                 />
                                 <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>