Fix for theme not updating

src/components/Custom/CustomAgenda.js

@@ -1,46 +1,59 @@
 import * as React from 'react';
+import {View} from "react-native";
 import {withTheme} from 'react-native-paper';
 import {Agenda} from "react-native-calendars";
 
+type Props = {
+    theme: Object,
+}
+
 /**
  * Abstraction layer for Agenda component, using custom configuration
- *
- * @param props Props to pass to the element. Must specify an onRef prop to get an Agenda ref.
- * @return {*}
  */
-function CustomAgenda(props) {
+class CustomAgenda extends React.Component<Props> {
-    const {colors} = props.theme;
+
-    return (
+    getAgenda() {
-        <Agenda
+        return <Agenda
-            {...props}
+            {...this.props}
-            ref={props.onRef}
+            ref={this.props.onRef}
             theme={{
-                backgroundColor: colors.agendaBackgroundColor,
+                backgroundColor: this.props.theme.colors.agendaBackgroundColor,
-                calendarBackground: colors.background,
+                calendarBackground: this.props.theme.colors.background,
-                textSectionTitleColor: colors.agendaDayTextColor,
+                textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
-                selectedDayBackgroundColor: colors.primary,
+                selectedDayBackgroundColor: this.props.theme.colors.primary,
                 selectedDayTextColor: '#ffffff',
-                todayTextColor: colors.primary,
+                todayTextColor: this.props.theme.colors.primary,
-                dayTextColor: colors.text,
+                dayTextColor: this.props.theme.colors.text,
-                textDisabledColor: colors.agendaDayTextColor,
+                textDisabledColor: this.props.theme.colors.agendaDayTextColor,
-                dotColor: colors.primary,
+                dotColor: this.props.theme.colors.primary,
                 selectedDotColor: '#ffffff',
                 arrowColor: 'orange',
-                monthTextColor: colors.primary,
+                monthTextColor: this.props.theme.colors.primary,
-                indicatorColor: colors.primary,
+                indicatorColor: this.props.theme.colors.primary,
                 textDayFontWeight: '300',
                 textMonthFontWeight: 'bold',
                 textDayHeaderFontWeight: '300',
                 textDayFontSize: 16,
                 textMonthFontSize: 16,
                 textDayHeaderFontSize: 16,
-                agendaDayTextColor: colors.agendaDayTextColor,
+                agendaDayTextColor: this.props.theme.colors.agendaDayTextColor,
-                agendaDayNumColor: colors.agendaDayTextColor,
+                agendaDayNumColor: this.props.theme.colors.agendaDayTextColor,
-                agendaTodayColor: colors.primary,
+                agendaTodayColor: this.props.theme.colors.primary,
-                agendaKnobColor: colors.primary,
+                agendaKnobColor: this.props.theme.colors.primary,
             }}
-        />
+        />;
-    );
+    }
+
+    render() {
+        if (this.props.theme.colors.text === "#ffffff") // We are in light mode
+            return (
+                <View style={{flex: 1}}>
+                    {this.getAgenda()}
+                </View>
+            );
+        else
+            return this.getAgenda();
+    }
 }
 
 export default withTheme(CustomAgenda);

src/screens/Planning/PlanningScreen.js

@@ -40,7 +40,7 @@ const AGENDA_MONTH_SPAN = 3;
 /**
  * Class defining the app's planning screen
  */
-export default class PlanningScreen extends React.Component<Props, State> {
+class PlanningScreen extends React.Component<Props, State> {
 
     agendaRef: Object;
 
@@ -226,10 +226,15 @@ export default class PlanningScreen extends React.Component<Props, State> {
         );
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State, prevContext: *): * {
+        console.log('coucou');
+    }
+
     render() {
         // console.log("rendering PlanningScreen");
         return (
             <CustomAgenda
+                {...this.props}
                 // the list of items that have to be displayed in agenda. If you want to render item as empty date
                 // the value of date key kas to be an empty array []. If there exists no value for date key it is
                 // considered that the date in question is not yet loaded
@@ -259,3 +264,5 @@ export default class PlanningScreen extends React.Component<Props, State> {
         );
     }
 }
+
+export default PlanningScreen;

src/screens/Proximo/ProximoListScreen.js

@@ -4,9 +4,10 @@ import * as React from 'react';
 import {FlatList, Image, Platform, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
 import CustomModal from "../../components/Custom/CustomModal";
-import {IconButton, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
+import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../../utils/Search";
 import ProximoListItem from "../../components/Lists/ProximoListItem";
+import HeaderButton from "../../components/Custom/HeaderButton";
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -37,6 +38,7 @@ const LIST_ITEM_HEIGHT = 84;
 type Props = {
     navigation: Object,
     route: Object,
+    theme: Object,
 }
 
 type State = {
@@ -54,8 +56,6 @@ class ProximoListScreen extends React.Component<Props, State> {
     listData: Array<Object>;
     shouldFocusSearchBar: boolean;
 
-    colors: Object;
-
     constructor(props) {
         super(props);
         this.listData = this.props.route.params['data']['data'];
@@ -65,8 +65,6 @@ class ProximoListScreen extends React.Component<Props, State> {
             currentSortMode: 3,
             modalCurrentDisplayItem: null,
         };
-
-        this.colors = props.theme.colors;
     }
 
 
@@ -104,14 +102,7 @@ class ProximoListScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getSortMenuButton = () => {
-        return (
+        return <HeaderButton icon="sort" onPress={this.onSortMenuPress}/>;
-            <IconButton
-                icon="sort"
-                color={this.colors.text}
-                size={26}
-                onPress={this.onSortMenuPress}
-            />
-        );
     };
 
     /**
@@ -164,11 +155,11 @@ class ProximoListScreen extends React.Component<Props, State> {
     getStockColor(availableStock: number) {
         let color: string;
         if (availableStock > 3)
-            color = this.colors.success;
+            color = this.props.theme.colors.success;
         else if (availableStock > 0)
-            color = this.colors.warning;
+            color = this.props.theme.colors.warning;
         else
-            color = this.colors.danger;
+            color = this.props.theme.colors.danger;
         return color;
     }