Constants not extended

[superandrew]

Describe the bug
A clear and concise description of what the bug is.
I am not sure if this is a bug related to Expo 34/RN0.59. Probably some misconfiguration on my side.

I thought the problem was related to Material Kit which I was trying to use, but after some investigating, I closed this creativetimofficial/material-kit-react-native#5 because it is definitely a problem I'm having with Galio's theme system

My application is built starting from an expo start. So it has an index.js and an App.js. I'm not sure this is common or if there is a better way, however, here are my two files.

index.js

import React from "react";
import { registerRootComponent } from "expo";
import KeepAwake from "expo-keep-awake";
import App from "./App";

import { Provider } from "react-redux";
import store from "./redux/store";
import { GalioProvider, withGalio } from "galio-framework";

import authActions from "./redux/auth/actions";

store.dispatch(authActions.checkAuthorization());

let colors = {
  ACCENT: "#26A7F2", //2
  DARK: "#2486F9", //1
  TEXT: "#144A67",
  BACKGROUND: "#FDFFFC", //4
  BACKGROUND_ALT: "#E9F7FF", //5
  LESS_DARK: "#BFBFBF" //3
};
const customTheme = {
  COLORS: {
    DEFAULT: colors.LESS_DARK,
    PRIMARY: colors.ACCENT,
    SECONDARY: colors.DARK,
    LABEL: colors.LESS_DARK,
    INFO: colors.LESS_DARK,
    ERROR: colors.DARK,
    SUCCESS: colors.ACCENT,
    WARNING: colors.ACCENT,
    MUTED: colors.BACKGROUND,
    INPUT: colors.DARK,
    ACTIVE: colors.ACCENT,
    BUTTON_COLOR: colors.LESS_DARK,
    PLACEHOLDER: colors.LESS_DARK,
    SWITCH_ON: colors.ACCENT,
    SWITCH_OFF: colors.BACKGROUND,
    GRADIENT_START: colors.LESS_DARK,
    GRADIENT_END: colors.ACCENT,
    PRICE_COLOR: colors.ACCENT,
    BORDER_COLOR: colors.LESS_DARK,
    BLOCK: colors.ACCENT,
    ICON: colors.DARK,
    INPUT_COLOR: colors.DARK,
    INPUT_BACKGROUND_COLOR: colors.BACKGROUND,
    VIEW_BACKGROUND: colors.BACKGROUND_ALT,
    CARD_BACKGROUND: colors.BACKGROUND,
    BACKGROUND_COLOR: colors.BACKGROUND,
    BAR_BACKGROUND_COLOR: colors.BACKGROUND_ALT,
    TEXT: colors.TEXT,
    TEXT_REVERSE: colors.BACKGROUND
  },
  SIZES: {
    BASE: 16,
    FONT: 16,
    ICON: 16,
    OPACITY: 0.8,
    BORDER_RADIUS: 6,
    BORDER_WIDTH: 0.8

    
  }
};


class Main extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <GalioProvider theme={customTheme}>
          <App />
        </GalioProvider>
      </Provider>
    );
  }
}

registerRootComponent(withGalio(Main));

I'm not sure if using withGalio here makes sense, but customTheme here has only the properties I defined. I assume this is correct, because it seems logical that the GalioProvider components merges together GalioTheme with this custom properties object.

Now, the App.js part.

If I use withGalio in it, in order to be able to use whatever constants I defined in the custom theme, everything gets broken.

Meaning that my entire application is broken. I see that the components are cycling on the flat list but I see nothing on my app apart from a couple of mispositioned titles.

However, (theme) is populated with everything so I guess that the theming mechanism is working.

app.js

import React from "react";
import { Platform, StatusBar, StyleSheet, View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";
import { AppLoading } from "expo";
import { Ionicons } from "@expo/vector-icons";
import { Asset } from "expo-asset";
import * as Font from "expo-font";
import AppNavigator from "./navigation/AppNavigator";
//import ProjectsScreen from "./screens/ProjectsScreen";
import LoginScreen from "./screens/LoginScreen";
import { withGalio } from "galio-framework";
import authAction from "./redux/auth/actions";

import { connect } from "react-redux";
import NavigationService from "./navigation/NavigationService";
const { logout } = authAction;

import { SignupScreen } from "./screens/SignupScreen";
import GalioConfig from "./assets/fonts/galioExtra";
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings(["ReactNative.NativeModules.LottieAnimationView"]);

import RegistrationNavigator from "./navigation/RegistrationNavigator";
const GalioExtra = require("./assets/fonts/galioExtra.ttf");
const Galio = require("./assets/fonts/galio.ttf");
export class App extends React.Component {
  state = {
    isLoadingComplete: false,
    isLoggedIn: false
  };

  constructor(props) {
    super(props);
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      //console.log("App Started");
      return (
        <View style={styles.container}>
          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
          {this.props.isLoggedIn ? (
            <AppNavigator
              theme={this.props.theme}
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          ) : (
            <RegistrationNavigator
              theme={this.props.theme}
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          )}
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/robot-dev.png"),
        require("./assets/images/robot-prod.png")
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Ionicons.font,
        GalioExtra: GalioExtra,
        galio: Galio,
        "poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf")
        // "lato-hairline": require("./assets/fonts/Lato-Hairline.ttf"),
        // "lato-light": require("./assets/fonts/Lato-Light.ttf"),
        // "lato-regular": require("./assets/fonts/Lato-Regular.ttf"),
        // "montserrat-bold": require("./assets/fonts/Montserrat-Bold.ttf"),
        // "montserrat-light": require("./assets/fonts/Montserrat-Light.ttf"),
        // "montserrat-regular": require("./assets/fonts/Montserrat-Regular.ttf"),
        // "montserrat-thin": require("./assets/fonts/Montserrat-Thin.ttf"),
      })
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = theme =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.COLORS.VIEW_BACKGROUND
    }
  });

export default connect(
  state => ({
    isLoggedIn: state.Auth.idToken !== null,
    auth: state.Auth
  }),
  { logout }
)(withGalio(App, styles));

Of course, the withGalio is inside the connect parameter, I am not sure if this does conflict in some way, even If I think it shouldn't.

Honestly, I understand that this sounds more like a help request than a bug report. However this behaviour started when, after upgrading to Expo v34/React Native 0.59. The application was broken because some properties from the custom theme I was using in the application broke. I realized that I was importing the theme from constants as material kit does, but the galio theme base property which I am pretty sure were there were not there anymore.

I read the documentation of galio theming to death but I can't figure out what am I doing wrong.

I can provide more code samples if useful.

Thanks to anyone that could provide a clear explanation on how to use the galio theming system and/or help me figure out the problem!